transformについて学ぶ

rotate

要素の回転を作用とする。

• rotate(n deg | turn | rad | grad)
• rotate3d(x, y, z, angle)
• rotateX(n deg | turn | rad | grad)
• rotateY(n deg | turn | rad | grad)
• rotateZ(n deg | turn | rad | grad)

単位に関して。degは360度で一周、gradは400gradで一周、radは2πラジアンで一周、turnは1turnで一周となる。

なお、rotateの起点をtransform-origin(x, y, z)で指定することができる。値はキーワード(left, right, top, bottom, center)もしくは数字単位で指定することが可能だがzにパーセントをセットすると無効となる。

skew

要素の歪みを作用とする。

• skew(x[, y])
• skewX(angle)
• skewY(angle)

単位に関して。degは360度で一周、gradは400gradで一周、radは2πラジアンで一周、turnは1turnで一周となる。

scale

要素の拡大縮小を作用とする。

• scale(sx[, sy])
• scale3d(sx, sy, sz)
• scaleX(s)
• scaleY(s)
• scaleZ(s)

translate

要素の配置を作用とする。

• translate(x, y)
• translate3d(tx, ty, tz)
• translateX(tx)
• translateY(ty)
• translateZ(tz)

単位は長さを表現できるものでtxはパーセントを使用できない。

matrix

• matrix(a, b, c, d, tx, ty)
• matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

よくわからん。

perspective

transformプロパティの値だけではなくperspectiveプロパティとしても存在しているが、perspectiveプロパティは親要素で深度を設定するためのものでperspective()は子要素に設定するものである。

親要素にperspective-originを与えることで視野原点を設定できる。(キーワードとしてtop、bottom、left、right、数値としてpx、%等)

子要素にtransform-styleを与えることで表示物を立体空間(preserve-3d)に置くのか、平面化(flat)するのかを指定できる。