transformプロパティで要素を変形させる

transformとは

CSSのtransformプロパティでは、トランスフォーム関数を指定して対象要素を変形させることができます。

要素にマトリクス変形、移動、縮尺、回転、傾斜などの変形を適用することで、CSSのみで自由度の高い表現を行うことができます。

アニメーションと組み合わせることで様々な効果をつけることもできますよ。 下記のようなサイトデザイン・動きを作る際にtransformプロパティはよく使われています。

• 見出しやラベルが斜めになっているデザイン
• 背景色が斜めに切り替わっていくデザイン
• マウスホバーで画像やボタンが拡大される
• マウスホバーで斜めに背景色が入る
• 回転扉のように要素が回って表示される

X軸、Y軸、Z軸について

CSSのtransformプロパティでは、移動・変形する方向を示すためにX軸、Y軸、(3D変形の場合は)Z軸を基準に変形方向を指定します。

基本的には下記の認識で大丈夫です。

• X軸：横方向
• Y軸：縦方向
• Z軸：奥行方向

transformの指定方法

transformプロパティの指定方法（プロパティ値/関数値）について、概要を紹介します。 見本用として３つ並べたdivを使用ます。 初期状態は下記の通りです。

なお、transformのプロパティも関数は、かなり種類が多いです。
下記の解説は基礎部分となっております。transformプロパティについて詳しく知りたい方はtransform-MDNをご確認ください。

translate-移動

translateでは、要素の表示位置を移動させることが出来ます。

プロパティ値の書き方は下記の５種類。

• translate(X方向の移動距離, Y方向の移動距離)
• translateX(X方向の移動距離)
• translateY(Y方向の移動距離)
• translateZ(Z方向の移動距離)
• translate3d(X方向の移動距離, Y方向の移動距離, Z方向の移動距離)

例えば下記のコードの場合は、右へ50px、下に30px移動します。

.red{
  background: red;
  transform: translate(50px, 30px);
}

では、次に3dの方を書いてみましょう。

.red{
  background: red;
  transform: translate3d(50px, 30px, -15px);
}

実は、これだけでは3D移動はされません。 Z軸方向の指定は無視され、先ほどと同じ表示になります。

Z軸の移動は親要素に下記のプロパティを指定をしないと、3D表示として機能しません。

• transform-style: preserve-3d;
• perspective: 3D変形の奥行きの深さ指定

親要素に上記の指定を加えてみます。

.wrapper{
  max-width: 1170px;
  display: flex;
  margin-bottom: 250px;
  transform-style: preserve-3d;
  perspective: 200px;
}
.red{
  background: red;
  transform: translate3d(50px, 30px, -15px);
}

見え方が変わりましたね。 redのdivがZ軸方向に-15px（後方に移動）したことで、先ほどとは異なりgreenの背面に表示されました。 後ろに動くため、視覚効果に沿ってdivのwidthも小さくなっています。

scale-拡大縮小

transformの値にscaleを利用すると、要素を拡大縮小することが出来ます。 指定方法は下記の５タイプ。

• scale(X方向の縮尺比率, Y方向の縮尺比率)
• scaleX(X方向の縮尺比率)
• scaleY(Y方向の縮尺比率)
• scaleZ(Z方向の縮尺比率)
• scale3d(X方向の縮尺比率, Y方向の縮尺比率, Z方向の縮尺比率)

縮尺比率は「1」が100％を示します。 0.5であれば50％に縮小する、という意味です。

.green{
  background: green;
  transform:scale(0.5);
}

「scale3d」も使用する場合もtranslateと同じく親要素にtransform-style: preserve-3d;が適用されている必要があります。 ただし、scaleZの値は単体で使っても、あまり意味はありません。

rotate-回転

transformの値にscaleを利用すると、要素を回転させることが出来ます。

• rotate(回転角度)
• rotate3d(数値, 数値, 数値, 回転角度)
• rotateX(X軸を軸とする回転角度)
• rotateY(Y軸を軸とする回転角度)
• rotateZ(Z軸を軸とする回転角度)

rotateの回転角度を(10deg)と正数で指定した場合は時計回りで回転します。 rotateの回転角度を(-10deg)と負数で指定した場合は反時計回りに回転します。 単位に使われているdegは英語のdegree（度）を省略したものです。

.red{
  background: red;
  transform: rotate(10deg);
}
.green{
  background: green;
}
.yellow{
  background: yellow;
  transform: rotate(-10deg);
}

rotate3d()関数を使用した場合は、回転軸をXYZ方向で指定し、回転を指定できます。

.green{
  background: green;
  transform: rotate3d(1, 1, 1, 40deg);
}

2dで回転させたred,yellowとは動きが違うことがわかりますね。

回転軸はx,z,yの数値を総合して導き出されています。ベクトル計算など難しい話になってきますが、正直なところ計算式を理解していなくても利用できます。 下記のようなジェネレータを使える基礎知識があれば十分です。

rotate3d| CSS3 Generato

きちんと数値の関係や軸の導き方を知りたい方は、rotate3d() ｜MDNなどを参考にして下さい。

先程紹介したように、単体で指定した場合scaleZの値を変えても表示は同じでした。 しかし、rotateと組み合わせると違いが明確になり立体感が出ます。

skew-傾斜（歪み）

skewでは傾斜（歪み）の角度を指定して要素を変形することが出来ます。 指定可能なのは2D（XY方向）のみで、Z軸方向はありません。

• skew(X軸の傾斜角度, Y軸の傾斜角度)
• skewX(X軸の傾斜角度)
• skewY(Y軸の傾斜角度)

それぞれの表示は下記のようになります。

.red{
  background: red;
  transform:skewX(20deg);
}
.green{
  transform:skewY(20deg);
  background: green;
}
.yellow{
  transform:skew(20deg,20deg);
}

　　 ↓

matrixとmatrix3dについて

matrix()では、 transformプロパティで使用する４つの関数

• translate()
• scale()
• rotate()
• skew()

これらを座標化することで、まとめて指定することが出来ます。 matrix()を使用すると2Dでの変形、matrix3d()の場合は3D（Z軸方向）での変形表現で指定できます。

…が、指定方法が難しいです。

matrix3d() 関数は16の値で指定します。列優先の順で記述します。

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 <number>で、線形変換を記述します。 a4 b4 c4 d4 <number>で、適用する変換を記述します。 引用元：matrix3d() | MDN

かなり慣れた方でないと、数値の変更・調整からして大変ですよね。

ですが、詳細までしっかりと把握していなくても、存在を認知できていれば問題ありません。
使わないと行けない場面で調べてたり、下記のようなCSSジェネレーターの力を借りて設定できれば良いでしょう。

The CSS3 Matrix Construction Set

matrix()を使わなくとも、transformプロパティでは半角スペースで区切ることで複数の値（関数）を設定することが出来ます。 下記のようにそれぞれ書いたほうが、分かりやすくはありますね。

.class{
  transform:scaleX(0.7) scaleY(0.7) scaleZ(0.5) rotateY(20deg);
}

transform関連プロパティ

transform-origin

transform-originでは、変形を行う際の原点を設定します。

例えば、下記のような正方形の要素（div）で、 rotateのみ使って回転させると下記のようになります。

しかし、回転の原点（基準点）をずらしたい時もありますよね。 その場合は、transform-originプロパティを使用することで、原点を任意に設定することが出来ます。

transform-originの初期値は「50% 50% 0」で要素の中央。 なので、指定しない場合は中央が原点として扱われます。

transform-originの値は上の例で使用した「%」以外に、top、bottm、left、right、「px」単位での指定なども可能です。 詳細：transform-origin ｜MDN

3D表現に関係するプロパティ

その他に変形（transform）3D表現に関係するCSSプロパティには以下があります。 使用頻度が高いとは言えませんので、概要だけ紹介します。

• transform-style：子要素を3Dで配置するか、平面配置にするかを決める
• perspective：3D配置された要素に遠近感を与える（奥行きの指定）
• perspective-origin：3D表示の場合、閲覧者の視点の位置を決める
• backface-visibility：要素の背面を描画するか

実習

PORTFOLIOセクションのカード画像部分に「マウスオーバーすると画像がズームされる」という動きを加えます。

マウスを重ねた時に画像を拡大したいので、imgタグのホバー時をセレクタにします。

要素を拡大したい時に使うのはtransformでしたね。 カッコ内の値が倍率なので、とりあえず縦横1.3倍で設定してみましょう。

ブラウザで表示を確認してみます。 拡大はされましたが、img-fluidクラスが付いているのに画像がカードからはみ出してしまっていますね。

枠内に収まるよう設定しましょう。 imgを囲うdivを作り「card-imgbox」という独自クラスを追加します。

画像をクリックで詳細ページにジャンプする・拡大表示するなどの設定も必要ですので、合わせて画像部分をaタグで囲っておいてください。

「card-imgbox」に対し、はみ出した部分は表示しないoverflow: hidden;を設定します。 transitionで変化時間を入れ、ズームされる感も演出してみましょう。

ブラウザで動作を確認してください。

はみ出しが無くなり、完成図のようにズームされたらOKです。 他カードの画像部分も同じようにcard-imgboxクラスのdivで囲って下さい。

実習作成分は素材欄にアップロードしています（transform.zip）。