はじめに

こんにちは！NNCの大土（おおど）です。
今日はCSSのtransformプロパティについてのお話です。

javascriptを使わずCSSのプロパティだけでもさまざまな動きの表現をすることができますが、transformってちょっと苦手なんだよな…と思っている方も多いのではないでしょうか。

transformを日本語に訳すと「変身」「変化」「変形」の意味になります。
車がロボットに変形して戦う映画のトランスフォーマーのtransformですね。
ちなみに私はバンブルビーが好きです。

CSSのお話に戻すと、
単純に要素を移動させることから、移動しながら回転して拡大・奥行きを表現して3Dのような動きを作る…のような複雑なことまでできるので、どのように変身・変化させるかのバリエーションが多いです。

また3Dの表現をする場合もX・Y・Z軸など方向や角度の設定も必要になってくるので、これも難しいと感じるポイントなんじゃないかなと思います。

今回の記事ではtransformプロパティでできることを詳しく解説しつつ、こんな場面で使えますよ、という制作例までご紹介していきます。

この記事を読んでtransformプロパティを使いこなせるようになりましょう！

移動させる translate

要素を移動させるには、transform: translate　という記述をします。
今の位置からどこにどのくらい移動させるか、下記のパターンで指定することができます。

値の種類	説明
translateX	横方向(X軸)に移動
translateY	縦(Y軸)方向に移動
translateZ	前後(Z軸)方向に移動
translate3D(X,Y,Z)	横(X軸)・縦(Y軸)・前後(Z軸)の移動を同時に設定

translateX

横方向(X軸方向)にどれくらい移動させるか、を指定します。
数値が正の数なら右方向に、負の数なら左方向に動かすことができます。

See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.

translateY

縦方向(Y軸方向)にどれくらい移動させるか、を指定します。
数値が正の数なら下方向に、負の数なら上方向に動かすことができます。

See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.

translateZ

正面から見たときに、要素を前方向に動かす（近づける）・後ろ方向に動かす（遠ざける）かを指定でき、数値が正の数なら前方向に、負の数なら後方向に動かすことができます。

See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.

translateZを使う時は、必ず一緒にperspective（＝どのくらい視点を離すか）も記述します。
どのくらい離れた距離から要素を見て、その要素をどのくらい動かすか、というイメージです。

translate3D

translateX、Y、Zのショートハンドで、X・Y・Z軸方向へどれくらい移動させるか、一括で指定することができます。まとめて指定することで3D表現を作ることができます。
translate3d(X,Y,Z)という形で記述します。translateZを含むので、前述のperspectiveの記述も必要になります。

See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.

回転させる rotate

要素を回転させるには、transform: rotate(deg)　という記述をします。
degは角度のこと（=degree）で、例えば45degなら45度です。
今の状態からどのくらい回転させるか、下記のパターンで指定することができます。

値の種類	説明
rotateX	X軸を起点に回転
rotateY	Y軸を起点に回転
rotate(deg)	平面方向に回転（rotateZと同じ）
rotateZ	Z軸を起点に回転
rotate3d(X,Y,Z,deg)	X・Y・Zの3方向を起点に回転

回転方向のイメージは下記の画像を参考にしてください。
それぞれの軸に沿って指定した角度の分だけ要素が回転します。

rotateX

X軸に沿ってどれくらい回転させるかを指定します。
角度が正の数なら正面が上方向に、負の数なら正面が下方向に回転します。

See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.

rotateY

Y軸に沿ってどれくらい回転させるかを指定します。
角度が正の数なら正面が右方向に、負の数なら正面が左方向に回転します。

See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.

rotate(deg)

平面に対してどれくらい回転させるかを指定します。後述のrotateZと同じ動きになります。

See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.

rotateZ

Z軸に沿ってどれくらい回転させるかを指定します。
要素の真ん中を起点とし、角度が正の数なら時計回りに、負の数なら反時計回りに回転します。

See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.

rotate3d

X・Y・Z軸3方向へどのくらい回転させるかを指定します。

rotate3d(X,Y,Z,deg)の形で記述し、X・Y・Zの位置には0（＝その軸の方向に回転をかけない）もしくは1（回転をかける）を入れます。degには角度を指定しましょう。

See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.

拡大縮小させる scale

要素を拡大・縮小させるには、transform: scale　という記述をします。
数値には倍率を指定し、今の形状からどの方向に大きく・小さくするか、下記のパターンで指定することができます。

値の種類	説明
scaleX	横方向（X軸）に拡大・縮小
scaleY	縦方向（Y軸）に拡大・縮小
scale(X数値,Y数値)	横（X軸）・縦（Y軸）方向に拡大・縮小
scaleZ	前後方向（Z軸）に拡大・縮小
scale3D	横（X軸）・縦（Y軸）・前後（Z軸）方向に拡大・縮小

scaleX

横方向(X軸)にどれくらい拡大・縮小させるかを指定します。
1より大きい数字なら拡大、1より小さい数字なら縮小します。

See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.

scaleY

縦方向(Y軸)にどれくらい拡大・縮小させるかを指定します。
数値の考え方はscaleXと同様です。

See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.

scale(X数値,Y数値)

横方向(X軸)・縦方向（Y軸）の拡大率を同時に設定することもできます。

See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.

※scaleの倍率に負の数値を入力してしまうと要素が反転しながら回転するという特徴があります。

See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.

scaleZ

前後方向(Z軸)にどれくらい拡大・縮小させるかを指定します。
transform:translate　同様、親要素に対してperspectiveの命令が必要です。
後述のscale3dでも解説していきます。

See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.

scale3d(X,Y,Z)

scaleX・Y・Zのショートハンドで、X軸・Y軸・Z軸方向へどれくらい拡大・縮小させるか、一括で指定することができます。こちらも3D表現をしたいときに使用します。

scale3dを使うときは、いくつか注意点があります。

1.scale3dを適用させたい要素の親要素に対してperspectiveを命令する必要がある
2.scale3dを適用させたい要素に対して、変化前と後でX軸もしくはY軸に異なる値を入れておく必要がある

下記のcodepenのresultを参考にしてください。
「手前に伸びる」はマウスを乗せる前と後でrotateYでY軸の角度を変えることによって手前に伸びる（Z軸方向に大きくする）ことがわかります。
一方「手前に伸びない」は横方向（X軸）・縦方向（Y軸）には大きくなっているものの、Z軸方向に大きくなっている様子は分からず、scale(X,Y)と同じ動きになってしまいます。

See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.

傾斜をつける skew

要素に傾斜をつけるには、transform: skew(角度)　という記述をします。
傾斜の角度を指定し、今の形状からどの方向にどのくらい傾けるか下記のパターンで指定することができます。

値の種類	説明
skewX	横方向(X軸)に傾斜をつける
skewY	縦方向(Y軸)に傾斜をつける
skew(X角度,Y角度)	横(X軸)・縦(Y軸)方向に傾斜をつける

skewX

横方向(X軸)にどれくらい傾斜をつけるかを指定します。
角度が正の数なら右方向に、負の数なら左方向に傾斜をつけて変形します。

See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.

skewY

縦方向(Y軸)にどれくらい傾斜をつけるかを指定します。
角度が正の数なら左上がり、負の数なら右上がりで傾斜をつけて変形します。

See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.

skew(X角度,Y角度)

横(X軸)・縦(Y軸)方向にどれくらい傾斜をつけるかを指定します。
角度がX・Yの両方とも正の数なら内側に傾き右下がりに、負の数なら外側に傾き左下がりで傾斜をつけて変形します。

See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.

transformの応用表現

上記で紹介したtransformのさまざまな表現と組み合わせて使用することで、より複雑な動きを実装することもできます。

transform-origin

要素のどこを起点にして変化させるかを指定します。
どこ、の部分にはtop・bottom・right・leftやcenter、px、%などの指定が可能です。
transform-origin: center bottom　のような形で2箇所に指定することもできます。

See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.

transform-style

変化させたい要素を、その親要素と同じ平面上に配置するか、もしくはその要素だけの独立した空間に配置させるかを指定します。

命令は親要素に対して記述し、
同じ平面上に配置するなら値にflat（初期値のため不要な場合は記述しなくてOK）、
独立した空間に配置するならpreserve-3dを指定します。

言葉の説明だとなかなか難しいと思うので、下記の2つの例をご覧ください。

どちらも水色背景の子要素には同じtransform: rotate3d(1,1,1,-45deg);の命令を出していますが、
transform-style: flatの方は親要素と子要素が同じ平面上に配置されていて、
一方preserve-3dは親要素と子要素がそれぞれ別の面に配置されていることがわかります。

See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.

使いどころが難しいですが、効果的に使用すれば変わった表現ができそうです。

transformを使ったアニメーション表現

transformプロパティの種類、考え方をご紹介してきましたが、
ここからは実際にどう使うと効果的か、アニメーションの作成事例を見ていきたいと思います。

ダウンロードボタン

ボタンにマウスを合わせると矢印が上下にふわっと動くアニメーションです。
ボタンであることが分かりやすく、またページ遷移のボタンとは区別したデザインにしたいときにもおすすめです。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

ローディングアニメーション

円の中を回転しているような、人気のローディングアニメーションです。
ポイントはborder-radiusで円形を作り、border-top-colorプロパティで円の縁の一部だけ色を変更することです。
一見難しそうなアニメーションですが、CSSだけを使って簡単に作ることができます！

See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.

記事画像の拡大

投稿記事のサムネイルなどでよく使われる、画像を拡大させて見せる方法です。
hoverしたときにtransform:scaleプロパティで拡大することによって再現できます。
親要素に対してoverflow:hiddenの命令を入れておくことで、親要素の範囲内で拡大表示してくれます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

バウンドする文字

transformとanimationを組み合わせて文字がバウンドする様子を表現しています。
タイトル文字などで使うことで目を惹く面白いデザインが作れそうです。

See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.

スライドする文字装飾

メニューにマウスを当てると文字の背景装飾が飛び出すアニメーションです。
このように傾斜をつけるtransform:skewを使って背景装飾を変形させる方法もありです。ただの線よりもインパクトがあります。

See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.

水面から魚が飛び出す

水面から魚がピョンッと飛び出してくるアニメーションです。
親要素と子要素に同じ色の背景色を設定しておき、魚のimg画像にanimationを命令して高さや左右の位置、またtransform:rotateで回転させています。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

まとめ

今回の記事ではtransformプロパティの使い方をご紹介しました。
それぞれの違いを理解して、オリジナルの表現を作る参考になれば嬉しいです。

STUDIO NNC 合同会社ではさまざまなアニメーション表現を得意としています。
制作のご相談がございましたら、お気軽にフォームよりお問い合わせください！