今回はCSSのコーディングでもよく使われるtransformプロパティについて詳しく見ていきたいと思います。このプロパティでは要素に対して移動や変形などを行うことができ、近年のウェブサイトデザインや機能実装には欠かすことのものになりますが、よく使うもののあれば、あまり馴染みがなく詳しい仕様や使い所がわからないというのものありました。そんなこともあり、改めて色々と用意されている指定方法を再確認していきたいと思います。   このtransformプロパティですが、値にはtransform関数という引数が取れるtransformで移動や変形をさせるメソッドが用意されており、それを値として指定する形になります。いくつか種類があるのでそれぞれ見ていきます。  

translate() / translate3d()

「translate()」「translate3d()」は要素の移動に使われるtransform関数です。下記のように引数に移動量を指定することで、その分だけ要素が移動して表示されます。

transformプロパティで要素を移動させるサンプルです（マウスカーソルを重ねると移動します）

CSSではこのように指定します。また、translate()およびtranslate3dの関数は下記の通りいくつか種類があり、必要に合わせて使い分けます。

.element {
  transform: translate(30px, 80%);
}

translate(Xdistance, Ydistance)	平面上での要素の移動を行う、第一引数にはX軸方向の、第二引数にはY軸方向の移動距離を指定（px、%など）
translate3d(Xdistance, Ydistance, Zdistance)	3D上での要素の移動を行う、第一引数にはX軸方向の、第二引数にはY軸方向の、第三引数にはZ軸方向の移動距離を指定（px、%など）
translateX(distance)	水平方向へ要素の移動を行う、引数にX軸方向への移動距離を指定（px、%など）
translateY(distance)	垂直方向へ要素の移動を行う、引数にY軸方向への移動距離を指定（px、%など）
translateZ(distance)	前後方向へ要素の移動を行う、引数にZ軸方向への移動距離を指定（px、%など）

 

scale() / scale3d()

「scale()」「scale3d()」は要素の伸縮に使われるtransform関数です。下記のように引数に伸縮率を指定することで、その分だけ要素が拡大・縮小して表示されます。

scaleプロパティで要素を伸縮させるサンプルです（マウスカーソルを重ねると拡大します）

CSSではこのように指定します。また、scale()およびscale3d()の関数は下記の通りいくつか種類があり、必要に合わせて使い分けます。

.element {
  transform: scale(1.2, 2.0);
}

scale(Xratio, Yratio)	平面上での要素の伸縮を行う、第一引数にはX軸方向の、第二引数にはY軸方向の伸縮率を数値で指定
scale3d(Xratio, Yratio, Zratio)	3D上での要素の伸縮を行う、第一引数にはX軸方向の、第二引数にはY軸方向の、第三引数にはZ軸方向の伸縮率を数値で指定
scaleX(ratio)	水平方向へ要素の伸縮を行う、引数にX軸方向への伸縮率を数値で指定
scaleY(ratio)	垂直方向へ要素の伸縮を行う、引数にY軸方向への伸縮率を数値で指定
scaleZ(ratio)	前後方向へ要素の伸縮を行う、引数にZ軸方向への伸縮率を数値で指定

 

skew()

「skew()」は要素の傾斜に使われるtransform関数です。下記のように引数に傾斜角度を指定することで、その分だけ要素が傾斜変形して表示されます。このskew()に関しては、平面上のみ有効となり3D上での表現はできないものになっています。

skewプロパティで要素を傾斜させるサンプルです（マウスカーソルを重ねると傾斜します）

CSSではこのように指定します。また、skew()の関数は下記の通りいくつか種類があり、必要に合わせて使い分けます。

.element {
  transform: skew(5deg, 10deg);
}

skew(Xangle, Yangle)	平面上での要素の傾斜を行う、第一引数にはX軸方向の、第二引数にはY軸方向の傾斜角度をdegの単位で指定
skewX(angle)	水平方向へ要素の傾斜を行う、引数にX軸方向への傾斜角度をdegの単位で指定
skewY(angle)	垂直方向へ要素の傾斜を行う、引数にY軸方向への傾斜角度をdegの単位で指定

 

rotate() / rotate3d()

「rotate()」「rotate3d()」は要素の回転に使われるtransform関数です。下記のように引数に回転角度を指定することで、その分だけ要素が回転して表示されます。

rotateプロパティで要素を回転させるサンプルです（マウスカーソルを重ねると回転します）

CSSではこのように指定します。また、rotate()およびrotate3d()の関数は下記の通りいくつか種類があり、必要に合わせて使い分けます。

.element {
  transform: rotate(90deg);
}

rotate(angle)	平面上での要素の回転を行う、引数には回転角度をdegの単位で指定、正の値も負の値も使用できる
rotate3d(Xaxis, Yaxis, Zaxis, angle)	3D上での要素の回転を行う、引数には「X軸方向の回転軸ベクトル、Y軸方向の回転軸ベクトル、Z軸方向の回転軸ベクトル」の後に回転角度を指定、正の値も負の値も使用できる
rotateX(angle)	X軸を回転の中心とした要素の回転を行う、引数には回転角度を指定、正の値も負の値も使用できる
rotateY(angle)	Y軸を回転の中心とした要素の回転を行う、引数には回転角度を指定、正の値も負の値も使用できる
rotateZ(angle)	Z軸を回転の中心とした要素の回転を行う、引数には回転角度を指定、正の値も負の値も使用できる

 

matrix() / matrix3d()

「matrix()」「matrix3d()」は要素の平面座標上あるいは3D座標上で指定座標の行列数を元に移動・変形ができるtransform関数です。下記のように引数に指定されている値を入れることで、その値の演算結果に応じた移動・変形が行われます。説明だけではわかりにくいのですが、こちらの「Understanding transform:matrix()」というサイトで紹介されているシミュレーターがとても参考になります。

matrixプロパティで要素を移動・変形させるサンプルです（マウスカーソルを重ねると移動・変形します）

CSSではこのように指定します。また、matrix()およびmatrix3d()の関数は下記の通りの種類があり、必要に合わせて使い分けます。

.element {
  transform: matrix(0.8, 0.5, -1.4, 1.8, 80, -132);
}

matrix(XXratio, XYratio, YXratio, YYratio, Xdistance, Ydistance)	平面座標上での要素の移動および変形を行う、引数には行列での6つの数値が入り「水平方向X座標の変化率、水平方向Y座標の変化率、垂直方向X座標の変化率、垂直方向Y座標の変化率、要素基準点のX軸方向への移動距離、要素基準点のY軸方向への移動距離」相当の値で全て数値で指定。
matrix3d(a1, a2, a3, a4, b1, b2, b3, b4, c1, c2, c3, c4, d1, d2, d3, d4)	3D座標上での要素の移動および変形を行う、引数には4×4の16個の座標が入り、それを元に行列計算した結果が反映される。

 

perspective()

「perspective()」は3D上で適用される3D変形において、奥行きを示す遠近感の度合いを指定します。引数には0以上の数値を指定し、その値はpx換算となります。値が大きいほど遠近感は緩やかになり、小さいほど遠近感が強くなり変形も極端になります。この設定は3D変形に対して有効となります。CSSではこのように指定します。

.element {
  transform: perspective(200);
}

  ちなみに同じ効果である「perspective」プロパティというものあります、その際はtransform関数という形ではなく下記のようにCSSのプロパティとして指定します。transform関数の場合はpx換算の単位が強制的に適用できますが、perspectiveプロパティの場合にはpx以外の単位も扱うことができます。

.element {
  perspective: 20em;
}

  また、transformプロパティの値は複数設定することができます。それぞれのtransform関数を半角スペースで区切って続けます。その際には指定順によって結果が変わることも注意しておきましょう。

.hoge {
  transform: transform(10px, 5px) rotate(45deg);
}
.fuga {
  transform: rotate(45deg) transform(10px, 5px);
}

 

transform-originプロパティで基準位置を設定

要素の移動や回転は基準点によって移動後、回転後の位置が変わることもあります。そんな場合には「transform-origin」プロパティで下記のようにtransform効果の基準点を指定することができます。値は水平方向の位置と垂直方向の位置の2つを指定し、基準点となる位置を設定します。

.hoge {
  transform-origin: left top;
  transform: rotate(45deg);
}
.fuga {
  transform-origin: right bottom;
  transform: rotate(45deg);
}

  そのほかにもtransformプロパティに関連するプロパティとしては、下記のようなものがあります。

perspective-origin	3D上における子要素の表示の視点を設定します。値は水平方向と垂直方向の2つを設定します。
backface-visibility	3D上における要素の背面を表示させるかどうかを設定します。値は「visible」と「hidden」の2つで、hiddenに設定した場合、正面から見えない背面部分は表示されなくなります。

 

transitionプロパティや@keyframesを併用したアニメーション効果

transformプロパティでの変形は「transition」プロパティや「@keyframes」を組み合わせることで手軽にアニメーション効果を表現することができます。例えば、translate()で水平軸方向に100px移動させる変形があった場合、transitionで時間経過を調整することで、X秒かけて左から右に動かすというアニメーションを表現することができます。もちろん@keyframesを使えば、プロパティの変化をキーフレーム単位で変えることができるので複雑な動きも可能になります。

.element {
  transform: translate(100px, 0);
  transition: transform 2.4s ease 0s;
}

 

---

  今回はCSSで要素の移動や変形ができるtransformプロパティについてまとめてみました。レイアウトの調整はもちろんのこと、UIの動きやアニメーション効果など、近年のウェブデザインでは様々な場面で多用されている重要なプロパティになります。たくさんの種類があるので是非覚えておきたいですね。