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

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

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

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

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

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

transformプロパティの使い方

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

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

transform: ○○○○○;

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

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

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には以下のような値もあります。

rotate（回転）の使い方

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

rotateのコーディング例

transform: rotate(r);

rには数値が入ります。

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

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

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

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

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

scale（伸縮）の使い方

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

scaleのコーディング例

transform: scale(X,Y);

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

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

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

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

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

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

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

skew（傾斜）の使い方

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

skewのコーディング例

transform: skew(r,r);

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

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

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

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

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

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

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

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