『transformプロパティ』を使用すると要素を変形させる事が出来ます。
更にはアニメーションとの組み合わせで要素が回り続けたり、拡大縮小などを繰り返すことができます。
今回はそんな要素の変形について、初心者向けに解説していきたいと思います。
まずは『transformプロパティ』をコーディングする為に、基礎となるコードを準備しておきましょう。
See the Pen rNVEjdY by PakuPaku (@PakuPaku) on CodePen.
✅HTMLでdivタグを使ってブロック要素を作成する
✅CSSで横幅200px、高さ50pxにブロック要素を指定する
✅ブロック要素の背景色を『dodgerblue』に指定する
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(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(r)・・・・回転する
✅rotateX(r)・・・横軸で回転する
✅rotateY(r)・・・縦軸で回転する
✅rotateZ(r)・・・直交で回転する
✅rotate3d(x,y,z,r)・・・3次元で回転する
scale（伸縮）の使い方
scaleを使用することで要素を伸縮させることができます。
scaleのコーディング例
transform: scale(X,Y);
XとYには元の要素から倍率を示す数字が入ります。
例えば横幅を２倍にしたい場合は２という数字が入ります。
1.2などの小数点までの倍率を表現することも可能です。
それでは早速試してみましょう。
See the Pen wvaLRrd by PakuPaku (@PakuPaku) on CodePen.
要素が縦横に伸縮され、ブラウザからはみ出ていますね（汗）
更にscaleには以下のような値もあります。
✅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.
縦軸は５度、横軸が５度傾斜していることが確認できますね。
更にskewには以下のような値もあります。
✅skew(r,r)・・・横(水平)横(垂直)が傾斜する
✅skewX(r)・・・横(水平)が傾斜する
✅skewY(r)・・・縦(垂直)が傾斜する
