最近便利なCSSおれおれAdvent Calendar 2023 – 20 日目

CSS アニメーションで便利な transform ですが、複数の変形を組み合わせた状態からさらに変形したいとき、transform 全体を総上書きしなくちゃいけなくて管理が面倒でした。

あるいは逆に簡単な変形でも transform プロパティと translate() 関数等を組み合わせて書くのがまあちょっとだけ手間でした。

今は関数じゃなくてプロパティで書けます。

例

.Button {
  &:is(:hover, :focus) {
    translate: 0 -1px;
  }

  &:active {
    scale: 0.95;
  }
}

取り得る値

translate

たぶん普通は 2 個の値を取り、X と Y の移動量を指定するのが多いかなと思います。

他に 1 個と 3 個の場合もあり、それぞれ 1 次元（X）と 3 次元（X, Y, Z）の移動量を指定できます。

scale

同様に 1 ～ 3 個の値を取りますが、1 個の場合は X と Y に同じ値が適用されます。たぶん多くの人にとって直観的だよね。2 個なら X と Y に別々の値を、3 個ならさらに Z の値を指定できます。

rotate

ちょっと特殊です。

角度 1 個の場合は普通に回転しますが、これは Z 軸（奥から手前）を中心に回転するということになります。

角度 2 個は指定は仕様にありません。

軸を変える場合は対象の名前と角度とを指定します。例えば rotate: z 90deg で Z 軸を中心に 90 度回転します。これは rotate: 90deg と同じなので、あまり使わないかと思います。

同様に rotate: x 20deg や rotate: y 20deg で X 軸や Y 軸を中心に回転しますが、立体的な要素でない場合はなんか潰れるだけなので、やはりあまり使わないかと思います。使う場合は perspective: 50px みたいなのをお忘れなく。

あとは rotate3d() 相当のこともできます。

適用順序

transform プロパティに translate() 等の関数を書く場合は書いた順だけど、プロパティの場合は以下の順序に固定されます。記述順序は関係しません。

  1. translate
  2. rotate
  3. scale
  4. transform

他の関係者は省略。正確な順序（変換行列）は仕様書の 6. Current Transformation Matrix を参照してください。

そういえば skew は

ないよ……。

おしまい

複雑な変形をやるときは transform:matrix() が便利です。便利か？　便利ということにしておいてください。昔作ったこれおすすめなので見てね。

参考