CSS
CSS3

Transformの使い方(各値のデモ一覧あり)

More than 1 year has passed since last update.

transformの使い方を正しく理解するためには、各値がどのような動きをするのか体感した方が早いと思い、全値のデモを作成しました。

各デモページの立方形をhoverすると、どう変化していくか確認できます。
また、Z軸方向の変形・奥行き・3Dに関しては、変化が分かりやすいようにオブジェクトを傾けた状態にしています。

demo_01.png
demo_02.png

transformの値一覧

効果
rotate 回転
translate 移動
scale 拡大・縮小
skew 歪み
perspective 奥行き
matrix 行列

補足

回転の単位について

基本は degree(deg) ですが、その他にも以下の単位が使用可能です。
gradradian はあまり使用した事がないので、今後使用するならdegreeでいいかなと思います(個人的に)。

ちなみにフラッシュの世界ではradianが一般的らしいです。

transform: rotate(360deg);
transform: rotate(400grad); // grade
transform: rotate(6.2831853rad); // radian
transform: rotate(1turn);

対応ブラウザ

CSS3 2D Transforms

Chrome Firefox Safari IE iOS(Safari)
◯ 43+ ◯ 41+ △ 8
◯ 9
△ 9
◯ 10+
△ 8.4
◯ 9.2

CSS3 3D Transforms

Chrome Firefox Safari IE iOS(Safari)
◯ 43+ ◯ 41+ △ 8
▲ 9
※1
▲ 10+
※2
△ 8.4
◯ 9.2

※2015/12/13 現在
◯:実装済み
△:ベンダープレフィックス必須
▲※1:backface-visibility のみ、ベンダープレフィックス必須
▲※2:transform-style: preserve-3d; のみ未サポート

軸・値の正負について

矢印の方向が正になります。

demo_03.png

Rotate系

rotate(degree)

DEMO
時計回りに2D回転

transform: rotate(45deg);

rotateX(degree)

DEMO
X軸を軸として、時計回りに回転

transform: rotateX(45deg);

rotateY(degree)

DEMO
Y軸を軸として、時計回りに回転

transform: rotateY(45deg);

rotateZ(degree)

DEMO
Z軸を軸として、時計回りに回転

transform: rotateZ(45deg);

rotate3d(x, y, z, degree)

DEMO
3D回転

transform: rotate3d(1, 1, 1, 45deg);

Translate系

translateX(x)

DEMO
X軸方向に2D移動

transform: translateX(150px);

translateY(y)

DEMO
Y軸方向に2D移動

transform: translateY(150px);

translateZ(z)

DEMO
Z軸方向に2D移動

transform: translateZ(150px);

translate(x, y)

DEMO
X, Y軸方向に2D移動

transform: translate(150px, 150px);

translate3d(x, y, z)

DEMO
X, Y, Z軸方向に3D移動

transform: translate3d(150px, 150px, 150px);

Scale系

Scale系の引数は、各方向への縮小率を表します。

transform: scale(x, y, z); = 
transform: scale(X軸方向への拡大縮小率, Y軸方向への拡大縮小率, Z軸方向への拡大縮小率);

scaleX(x)

DEMO
X軸方向に拡大

transform: scaleX(1.3);

scaleY(y)

DEMO
Y軸方向に拡大

transform: scaleY(1.3);

scaleZ(z)

DEMO
Z軸方向に拡大

transform: scaleZ(1.3);

scale(x, y)

DEMO
X, Y軸方向に2D拡大

transform: scale(1.3, 1.3);

scale3d(x, y, z)

DEMO
X, Y, Z軸方向に拡大

transform: scale3d(1.3, 1.3, 1.3);

Skew系

skewX(x)

DEMO
X軸方向に傾斜

transform: skewX(20deg);

skewY(y)

DEMO
Y軸方向に傾斜

transform: skewY(20deg);

skew(x, y)

DEMO
X, Y軸方向に傾斜

transform: skew(20deg, 20deg);

Perspective

perspective(length)

DEMO
視点〜Z(=0)間の平面距離の奥行き

transform: perspective(300px);

Matrix系

matrix(a, b, c, d, e, f)

  • a = 水平方向の縮尺 = scaleX
  • b = 垂直方向の傾斜率 = skewY
  • c = 水平方向の傾斜率 = skewX
  • d = 垂直方向の縮尺 = scaleY
  • e = 水平方向の移動距離 = translateX
  • f = 垂直方向の移動距離 = translateY

DEMO
scale, skew, translate を組み合わせた変形技

transform: matrix(2, 1, 1, 2, 100, 100);

matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p)

  • a = scaleX / cosθy / cosθz
  • b = -sinθz
  • c = sinθy
  • d = 0
  • e = sinθz
  • f = scaleY / cosθx / cosθz
  • g = -sinθx
  • h = 0
  • i = -sinθy
  • j = sinθx
  • k = scaleZ / cosθx / cosθy
  • l = 0
  • m = translateX
  • n = translateY
  • o = translateZ
  • p = 1

DEMO
matrix(a, b, c, d, e, f) の3D版

transform: matrix3d(
  2, 0, 0, 0,
  0, 3, 0, 0,
  0, 0, 4, 0,
  2, 3, 4, 1
);

引数の変更は、以下の通り…といっても、オブジェクトが増えると計算が複雑になってくるので基本は glMatrix, mjs といった専用ライブラリを使用するようです。

X軸に対する回転 = f(cosθx), g(-sinθx), j(sinθx), k(cosθx)
Y軸に対する回転 = a(cosθy), c(sinθy), i(-sinθy), k(cosθy)
Z軸に対する回転 = a(cosθz), b(-singθz), e(sinθz), f(cosθz)

参考

所感

matrix3dはあまりイメージがついていないというか、久しぶりに目にしたsin, cos系で大分頭が痺れたので理解が難しい状態です。
といっても規則はあるので、ライブラリを使用して3Dに慣れていければいけそうな気がする。

以上、Transformメモでした。