【CSS入門】transformで要素を拡大縮小・回転・傾斜・移動しよう

この記事ではCSSのtransformプロパティについて解説します。

transformとは？

要素に対して2D/3D変換を適用します。

具体的に言うと、要素を拡大縮小・回転・傾斜・移動することできます。

transformの使い方

transformに指定できる値は以下の通りです。

scale()

下記のようにコンマ区切りで数値を2つ指定すると、要素を縦と横に拡大・縮小します。

1つ目の数値でX軸(横軸)を、2つ目の数値でY軸(縦軸)の比率を指定します。

CSS

transform: scale(X軸の数値,Y軸の数値);

X軸とY軸同時ではなく、どちらかだけでも拡大・縮小できます。

CSS

transform: scaleX(X軸の数値);

transform: scaleY(Y軸の数値);

以下の場合、マウスホバーしたら、要素が横と縦に1.2倍ずつ拡大します。

HTML

<div class="BOX"></div>

CSS

.BOX{
  width:250px;
  height:250px;
}

.BOX:hover{
  transform: scale(1.2,1.2);
}

translate()

下記のようにコンマ区切りで数値をpxで2つ指定すると、要素が縦と横に移動します。

1つ目の数値でX軸(横軸)を、2つ目の数値でY軸(縦軸)の移動距離を指定します。

CSS

transform: translate(X軸の移動距離,Y軸の移動距離);

X軸とY軸同時ではなく、どちらかだけでも移動できます。

CSS

transform: translateX(X軸の移動距離);

transform: translateY(Y軸の移動距離);

以下の場合、マウスホバーしたら、要素が横(右)と縦(下)に50pxずつ移動します。

マイナスの数値も指定できるので、もしもtranslate(-50px,-50px)と指定していたら、要素が反対に横(左)と縦(上)に50pxずつ移動します。

CSS

.BOX{
  width:250px;
  height:250px;
}

.BOX:hover{
  transform: translate(50px,50px);
}

rotate()

下記のように回転させたい角度をdegで指定すると、要素が時計回りに回転します。

マイナスで角度を指定すると、反時計回りに回転します。

CSS

transform: rotate(〇〇deg);

以下の場合マウスホバーしたら、要素が時計回りで360度回転します。

マウスホバーで回転させたいときは、transitionプロパティを必ず一緒に使用します。

CSS

.BOX{
  width:250px;
  height:250px;
  transition: all 1s;
}

.BOX:hover{
  transform: rotate(360deg);
}

skew()

下記のように傾斜させたい角度をdegで指定すると、要素がゆがみます。

1つ目の数値でX方向(横)の傾斜を、2つ目の数値でY方向(縦)の傾斜を指定します。

CSS

transform: skew(X方向の傾斜,Y方向の傾斜);

以下の場合マウスホバーしたら、要素が横(右)と縦(下)に20degずつ傾きます。

マイナスの数値も指定できるので、もしもskew(-20deg, -20deg)と指定していたら、要素が反対に横(左)と縦(上)に20degずつ傾きます。

CSS

.BOX{
  width:250px;
  height:250px;
}

.BOX:hover{
  transform: skew(20deg,20deg);
}

perspective()

下記のように数値を指定すると、要素に奥行きが生じます。

数値が低いと遠近感が強くなり、 数値が大きくなると遠近感がゆるやかになります。 下記のようにrotateを同時に指定します。

CSS

.BOX{
  width:250px;
  height:250px;
}
 
.BOX:hover{
  transform: perspective(300px) rotateX(30deg);}
}

まとめ

慣れるまで少し時間がかかってしまうかもしれませんが、使いこなせると、今までとは違い立体的なサイトを作る事ができるようになるので、是非とも使いこなしてください。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。