transform - 2D、3Dの変形を指定する
投稿日: / 更新日:
スタイルシートのtransformは、要素に2次元、または3次元の変形効果を与えるためのプロパティです。
サンプルコード
transformを指定したサンプルコードです。
div {
transform: rotate( 30deg ) ;
}デモ
transformにrotate( 30deg )(30度の回転)を指定したデモです。要素が右方向に本来よりも30度、傾いているのを確認して下さい。CSSタブを編集して、どのように変化があるのかを試してみて下さいね。
値の指定
半角スペース( )で区切って、複数の値をまとめて指定することができます。
/* [scale]と[rotate]を同時に指定する */
#element {
transform: rotate( 30deg ) scale( 2, .5 ) ;
}
/* [scale]と[skew]と[translate]を同時に指定する */
#element {
transform: scale( 2, .5 ) skew( 30deg ) translate( 10px, 30px ) ;
}指定できる値の説明は下記の通りです。リンクをクリックするとデモを確認できます。
| 項目 | 説明 |
|---|---|
| inherit | 親要素の値を引き継ぐ。例の場合、div要素のtransformには、bodyに指定された値(rotate( 30deg ))が引き継がれる。 |
| initial | プロパティの初期値が適用される。この場合、none(変形なし)が適用される。 |
| none | 初期値。何の変形効果も与えない。 |
| matrix() | 2Dのマトリクス変形。6つの数値(px)を指定する。
|
| matrix3d() | 3Dのマトリクス変形。4*4の16個の数値(px)を指定する。…著者に数学の知識がないので勉強中です。 |
| translate() | 2Dの移動。1つ目の値にX軸(translateX)、2つ目の値にY軸(translateY)の移動距離を指定する。 |
| translate3d() | 3Dの移動。1つ目の値にX軸(translateX)、2つ目の値にY軸(translateY)、3つ目の値にZ軸(translateZ)の移動距離を、CSSで許可されている単位で指定する。 |
| translateX() | X軸(水平方向)の移動を、CSSで許可されている単位で指定する。正の数で右方向、負の数で左方向に移動する。 |
| translateY() | Y軸(垂直方向)の移動を、CSSで許可されている単位で指定する。正の数で下方向、負の数で上方向に移動する。 |
| translateZ() | Z軸(手前、奥)の移動を、CSSで許可されている単位(パーセンテージは不可)で指定する。正の数で手前方向、負の数で奥方向に移動する。 |
| scale() | 2Dの縮尺。1つ目の値にX軸(scaleX)、2つ目の値にY軸(scaleY)を指定する。 |
| scale3d() | 3Dの縮尺。1つ目の値に水平方向(scaleX)、2つ目の値に垂直方向(scaleY)、3つ目の値にZ軸方向(scaleZ)を指定する。Z軸の縮尺については、transform-originプロパティの第3引数で、要素と視点の間に距離をとらないと効果がない。 |
| scaleX() | X軸(水平方向)の縮尺。元のサイズに対する倍率で指定する。負の数で反転する。 |
| scaleY() | Y軸(垂直方向)の縮尺。元のサイズに対する倍率で指定する。負の数で反転する。 |
| scaleZ() | Z軸(奥方向)の縮尺。元のサイズに対する倍率で指定する。負の数で反転する。transform-originの第3引数を利用して、要素と視点の間に距離をとらないと効果は確認できない。デフォルトでは要素と視点の距離が0のため、縮尺されない。translateZと視覚的に同じに見えるが全く違う。こちらは拡大・縮小しているだけで移動をしていない。なので手前、奥の位置(z-index)が変化することはない。 |
| rotate() | 2Dの回転。正の数で右方向、負の数で左方向に回転する。 |
| rotate3d() | 3Dの回転。1〜3つ目の値でX軸、Y軸、Z軸のベクトルを指定した上で、4つ目の値で右回りの角度を指定する。 |
| rotateX() | X軸を起点とした回転。正の数で右方向、負の数で左方向に回転する。 |
| rotateY() | Y軸の回転。正の数で右方向、負の数で左方向に回転する。 |
| rotateZ() | Z軸の回転。正の数で右方向、負の数で左方向に回転する。 |
| skew() | 2Dの傾斜。1つ目の値にX軸の角度(skewX)、2つ目の値にY軸の角度(skewY)を指定する。 |
| skewX() | X軸を起点とした傾斜。 |
| skewY() | Y軸を起点にした傾斜。 |
| perspective() | 奥行きをもたせて遠近の効果を付けます。0pxだと意味がないようです。数値が小さい、すなわち、要素との距離が近いほど、要素がダイナミックに映ります。「あ、こいつダイナミックって言葉に逃げた」って思ったあなた、正解です。 |
仕組み
transformプロパティを自在に操れるようになるには、X軸、Y軸、Z軸の理解が不可欠です。この章では、2D変換、3D変換がどのように行われているのかを説明します。
| 項目 | 説明 |
|---|---|
| X軸 | X軸とは水平方向の軸のことです。ここでは赤線で示しています。 |
| Y軸 | Y軸とは垂直方向の軸のことです。ここでは青線で示しています。 |
| 2Dの変形 | 2Dの変形の場合、X軸とY軸を基準にして、回転(rotate)や縮尺(scale)、傾斜(skew)が行なわれます。X軸、Y軸がこのように機能するということを覚えておきましょう。 |
| 軸の位置 | 2Dの変形では、X軸、Y軸はそれぞれ、要素の中央に配置されます。transform-originプロパティを利用することで、X軸、Y軸の位置を調整することができます。軸の位置を変更することで、効果に変化が出ます。 |
| Z軸 | Z軸とは手前から奥にかけて通る軸のことです。3Dの変形を行なう場合、X軸、Y軸に加えて、このZ軸も考慮しなければいけません。ここでは緑線で示しています。 |
| 3Dの変形 | 3Dの変形では、2DのX軸、Y軸に加えて、Z軸が加わります。手前、奥の概念が追加されるわけです。このように、3つの軸を考慮して効果を与えることで、要素を自由に変形させることができるでしょう。 |
| 視点の位置 | 最後に視点の位置を確認しておきましょう。transform-originの第3引数には、Z軸方向の視点の位置を調整することができます。0がデフォルトで、正の数で距離をとり、負の数で距離を詰めます。視点を離せば、その分、scaleZの振り幅が大きくなるなど、変化があります。 |
ブラウザのサポート
2016年7月現在の、ブラウザのサポート状況は次の通りです。全ての主要ブラウザで、ベンダープレフィクスなど気にすることなく利用できます。
Chrome
●
-
時期不明
Firefox
●
-
時期不明
Safari
●
-
時期不明
Ie
●
-
時期不明
Edge
●
-
時期不明
Opera
●
-
時期不明
Safari(iOS)
●
-
時期不明
Ie Mobile
●
-
時期不明
Chrome
●
-
時期不明
Android
●
-
時期不明
FF Mobile
●
-
時期不明
Opera Mobile
●
-
時期不明