CSS3でコーディング。transformで要素を変形させよう。

CSS3でコーディング。transformで要素を変形させよう。

『transformプロパティ』を使用すると要素を変形させる事が出来ます。

更にはアニメーションとの組み合わせで要素が回り続けたり、拡大縮小などを繰り返すことができます。

今回はそんな要素の変形について、初心者向けに解説していきたいと思います。

まずは『transformプロパティ』をコーディングする為に、基礎となるコードを準備しておきましょう。

See the Pen rNVEjdY by PakuPaku (@PakuPaku) on CodePen.

事前に準備したコードの概要

✅HTMLでdivタグを使ってブロック要素を作成する

✅CSSで横幅200px、高さ50pxにブロック要素を指定する

✅ブロック要素の背景色を『dodgerblue』に指定する

transformプロパティの使い方

まずはtransformプロパティをどの様に使うか解説しておきます。

transformプロパティを使ったコーディング例

transform: ○○○○○;

そしてこの○○○○○に値を入れることで要素を様々な形に変形させることができます。

transformでできる要素の変形

✅translate(移動)

✅rotate(回転)

✅scale(伸縮)

✅skew(傾斜)

それではそれぞれの要素の変形について解説していきます。

translate(移動)の使い方

translateを使用することで要素を移動させることができます。

translateのコーディング例

transform: translate(X,Y);

XとYにはそれぞれ数値が入ります。

例えばXに30pxと入れた場合には、元の場所から右に30px要素が移動することになります。

逆にXに-30pxと入れた場合には、元の場所から左に30px要素が移動することになります。

YもXと同様の考えになります。

例えばYに30pxと入れた場合には、元の場所から下に30px要素が移動することになります。

逆にYに-30pxと入れた場合には、元の場所から上に30px要素が移動することになります。

それでは早速CSSでコーディングしてみましょう。

See the Pen OJVeWvP by PakuPaku (@PakuPaku) on CodePen.

最初の位置から上から50px、右から50px要素が移動したのが確認できますね。

更にtranslateには以下のような値もあります。

いろいろなtranslate

✅translate(x,y)・・・横(水平)縦(垂直)に移動する

✅translateX(x)・・・横(水平)に移動する

✅translateY(y)・・・縦(垂直)に移動する

✅translateZ(z)・・・直交に移動する

✅translate3d(x,y,z)・・・3次元に移動する

rotate(回転)の使い方

rotateを使用することで要素を回転させることができます。

rotateのコーディング例

transform: rotate(r);

rには数値が入ります。

そしてこの時の単位としてdegを使用します。

それでは早速試してみましょう。

See the Pen BaNgRLV by PakuPaku (@PakuPaku) on CodePen.

5度だけ要素が傾いたことが確認できますね。

更にrotateには以下のような値もあります。

いろいろなrotate

✅rotate(r)・・・・回転する

✅rotateX(r)・・・横軸で回転する

✅rotateY(r)・・・縦軸で回転する

✅rotateZ(r)・・・直交で回転する

✅rotate3d(x,y,z,r)・・・3次元で回転する

scale(伸縮)の使い方

scaleを使用することで要素を伸縮させることができます。

scaleのコーディング例

transform: scale(X,Y);

XとYには元の要素から倍率を示す数字が入ります。

例えば横幅を2倍にしたい場合は2という数字が入ります。

1.2などの小数点までの倍率を表現することも可能です。

それでは早速試してみましょう。

See the Pen wvaLRrd by PakuPaku (@PakuPaku) on CodePen.

要素が縦横に伸縮され、ブラウザからはみ出ていますね(汗)

更にscaleには以下のような値もあります。

いろいろなrotate

✅scale(x,y)・・・横(水平)縦(垂直)に伸縮する

✅scaleX(x)・・・横(水平)に伸縮する

✅scaleY(y)・・・縦(垂直)に伸縮する

✅scaleZ(z)・・・直交に伸縮する

✅scale3d(x,y,z)・・・3次元に伸縮する

skew(傾斜)の使い方

skewを使用することで要素を傾斜させることができます。

skewのコーディング例

transform: skew(r,r);

rには角度を指定する数値が入ります。

そしてこの時の単位としてdegを使用します。

最初のrには縦(垂直)の角度を指定する数値を、そして後のrには横(水平)の角度を指定する数値が入ります。

いずれの数値にも角度の単位であるdegを使用します。

それでは早速試してみましょう。

See the Pen LYVKqXL by PakuPaku (@PakuPaku) on CodePen.

縦軸は5度、横軸が5度傾斜していることが確認できますね。

更にskewには以下のような値もあります。

いろいろなskew(傾斜)

✅skew(r,r)・・・横(水平)横(垂直)が傾斜する

✅skewX(r)・・・横(水平)が傾斜する

✅skewY(r)・・・縦(垂直)が傾斜する

CSSカテゴリの最新記事