cssで要素を変形できるプロパティtransform

cssで要素を変形できるプロパティtransformのアイキャッチ画像

他の要素に影響を与えず要素を変形プロパティーtransform

cssのtransformはhtmmlの各要素の大きさを変えずに見た目だけ変更することが可能です。
従って、他の要素への影響を意識せずに要素の変形を行うことが可能になるので非常に便利です。
transformは様々な変形を行うことが可能なのですが、今回はその中でもよく使う、移動、回転、拡縮を紹介します。
またtransformはそれ単体だけでも使用することはあるのですが、transitionやanimationなどと組み合わせて使用することで表現の幅が広がります。

要素を移動させるtranslate()

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

translate()自体は移動をさせるプロパティーですので、それ単体でも何も変化起きていないように見えますが、:hoverなどと組み合わせることで動きを見せることが可能になります。下記の長方形にマウスを重ねてみてください、移動することがわかると思います。

要素を回転させるrotate()

rotate(回転角度);

rotate()は要素を回転させるときに使用します。リンクボタンのあしらいに使用したり、斜めの線を表現したりする時に使用します。回転角度は「deg」で設定し、時計回りに90度回転させたいときは「90deg」反時計回りに90度回転させたいときは「-90deg」と設定します。
下記は正方形の右側と下がにボーダーを設定し-45度回転しています。

要素を拡縮させるscale()

transform:scale(X軸の拡大率,Y軸の拡大率);
transform:scaleX(X軸の拡大率);
transform:scaleY(Y軸の拡大率);

scale()は要素を拡大、縮小する時に使用します。これもtranslate()同様、これ単体ではあまり変化がわかりませんが、:hoverなどと組み合わせることで動きを表現できます。拡大率は「1」を100％として数値で指定をします。下の長方形にマウスオーバーしてもらうとわかる通り、widthやheightを変化させるのと違って、scale()で変形させると他の要素には影響せずに指定した要素の変形だけを行えるので非常に便利です。

変形の基準位置を設定するtransform-origin

transform-origin:X軸の基準位置 Y軸の基準位置;

translate()を使用する場合にはそれほど気になることはありませんが、rotate()やscale()を使用する場合は変形の基準位置を設定したい場合があります。そう言う時に使用するプロパティがtransform-originです。初期値は「50% 50%」で設定されており、要素の中心を基準に変形します。基準位置の設定はpxや％で設定できる他、「left,right,top,bottom」などでも設定できます。