CSS transformとは？
transformは、要素の座標系を移動・回転・拡大縮小・傾斜などで視覚的に変形するCSSプロパティです。このツールはW3C CSS Transforms Module Level 1に基づき、初版では2D transform関数を対象にしています。
transform関数は指定順に適用されます
W3C仕様では各関数の変換行列が左から右へ順番に掛け合わされます。そのため、translateX(100px) rotate(45deg)とrotate(45deg) translateX(100px)は同一ではありません。画面の↑・↓、生成コード、プレビュー、コピー内容は常に同じ順番です。
対応する2D transform
translate()・translateX()・translateY()：px・%・rem・emで移動します。負値と小数にも対応します。scale()・scaleX()・scaleY()：単位なしの倍率で拡大・縮小します。0や負数も有効です。rotate()：deg・turn・rad・gradで回転します。負角度や450degなども値を維持します。skewX()・skewY()：X方向またはY方向へ傾斜します。matrix()：a・b・c・d・e・fの6個のnumberで2D変換行列を直接指定します。
translateの%とtransform-origin
translateの横方向の%は対象要素のreference boxの幅、縦方向の%は高さが基準です。画面や親要素全体の50%ではありません。transform-originの%もreference boxを基準にし、回転・拡大・傾斜の中心を変更します。
scaleの負数・0とskewの注意
負のscaleは反転として有効です。たとえばscaleX(-1)は左右反転になります。scale(0)は変換行列が逆変換できないnon-invertibleな状態となり、要素が表示されなくなる場合があります。また、連続したskewX()とskewY()を単一のskew()と同一には扱いません。
通常レイアウトとの関係
transformは視覚表示を変えますが、通常のCSS layout flowで周囲の要素を再配置するものではありません。ただし変形後の領域はoverflowの計算に影響する場合があります。このプレビューではページ全体の横幅を壊さないよう、変形結果を内部領域で切り取っています。
入力と対応範囲
全角数字・全角小数点・全角マイナス・Unicodeのマイナスは半角へ正規化します。空欄、NaN、Infinity、指数表記、複数小数点、不正単位、matrixの値不足はCSSへ反映せず、直前の正常なプレビューを維持します。translateZ、translate3d、rotateX/Y/Z、rotate3d、scaleZ、scale3d、perspective、matrix3dなどの3D transformは今回の対象外です。
よくある質問
CSS transformとは何ですか？
要素を移動・回転・拡大縮小・傾斜などで視覚的に変形するCSSプロパティです。
transformの順番で結果は変わりますか？
変わります。関数は記述した左から右の順に行列へ掛け合わされるため、同じ関数でも順番が違うと見た目が変わります。
translateの%は何を基準にしますか？
横方向は変形対象のreference boxの幅、縦方向は高さを基準にします。画面全体の幅や高さではありません。
rotateの中心を変更できますか？
transform-originで変更できます。数値指定に加えて9つの位置プリセットを用意しています。
scaleに負数を使えますか？
使えます。負の倍率はその軸方向の反転になります。scaleX(-1)は左右反転です。
scale(0)ではどうなりますか？
変換行列が逆変換できない状態になり、対象要素は見えなくなることがあります。CSSとしては有効な値です。
rotateは360degを超えられますか？
指定できます。このツールは450degなどを0〜360へ正規化せず、そのまま出力します。
skewXとskewYとは何ですか？
skewXはX方向、skewYはY方向へ要素を傾斜させます。2つの連続指定は単一のskew関数と同一ではありません。
matrix()とは何ですか？
6個の数値で2D変形行列を直接指定する上級者向けの関数です。このツールは別関数への分解を行いません。
transformは通常レイアウト自体を移動させますか？
見た目を変形しますが、通常のCSSレイアウトフローで周囲の要素を再配置しません。ただしoverflow領域には影響します。
入力内容は外部送信されますか？
送信されません。設定とプレビューはブラウザ内だけで処理し、Cookieやブラウザストレージへ保存しません。