CSS トランスフォーム生成

CSSの transform プロパティは、ページのレイアウトに触れずに、要素を移動・回転・拡大縮小・傾斜させます。ほとんどのホバー効果やアニメーションの土台です。関数の順序が重要で、組み合わさった効果は想像しにくいため、このジェネレーターは個別のコントロールから値を作り、順序と基準点を選べるようにし、元のボックスと比べた結果をプレビューし、同等の matrix() または matrix3d() を1つ示します。

使い方

1. translate、rotate、scale、skewを設定します。3Dにするには、rotateX/rotateYとperspectiveを加えます。
2. 関数の順序とtransform-originを選びます。
3. プレビューで、青いボックスと点線の元の位置を比べます。
4. CSSをコピーします。スクリプトやアニメーション用に値が1つ必要なときは、matrixをコピーします。

計算式

translate(e, f) = [1 0 e; 0 1 f] · rotate(θ) = [cos θ −sin θ; sin θ cos θ] · scale(x, y) = [x 0; 0 y] · skew(α, β) = [1 tan α; tan β 1] · M = M₁ × M₂ × … in the written order

matrix(a, b, c, d, e, f) は3 × 3行列 [a c e; b d f; 0 0 1] を表します。3Dでは4 × 4行列を掛け合わせ、perspective(d) は最下行に −1/d を入れます。すべての関数は transform-origin を中心に作用します。

計算例

translate(10px, 20px) rotate(90deg) は [1 0 10; 0 1 20] に [0 −1 0; 1 0 0] を掛けて matrix(0, 1, −1, 0, 10, 20) になります。要素は時計回りに90度回り、右へ10 px、下へ20 px動きます。逆に rotate(90deg) translate(10px) と書くと matrix(0, 1, −1, 0, 0, 10) になり、10 pxの移動は回転した軸、つまり下向きに沿って行われます。