はいどうも！
バーチャル Youtuber ではない面白法人カヤックのごんです。
CSS Transform の Tips をやっていきます。
1. CSS Transform は後ろから適用される
transform: rotate(45deg) translateX(100px);
は、45度回転してから X 方向に 100px 移動、ではなく
X 方向に 100px 移動してから、45度回転 です。
これは百聞は一見にしかずなので、下にデモを貼ります。
なんで逆にしちゃったんですかね。
2. CSS Transform のパーセント表記は要素の幅に依存する
CSS Transform Translate のパーセント表記は、
DOM 要素とは異なり、親要素ではなく、自身の幅に対する割合を指します。
これも百聞は一見にしかずなので、デモを貼ります。
これは、特に要素の中央寄せする際に非常に便利な性質です。
Flexbox や margin: auto によるセンタリングと使い分けて利用しましょう。
3. CSS Animation は CSS Transform の記述する順番によって変わる
CSS Animation で、CSS Transform の値を変化させる場合、
記述する順番に依って、動き方が変わります。
百聞は一見にしかずとも言いますし、デモを貼ります。
違いがわかりますか？
左の猫ちゃんはまっすぐこっちに駆け寄ってくるのに対し、
右の猫ちゃんは蛇行しながらにじり寄ってきています。
耳の先に着目すると違いがよく分かります。
4. matrix は CSS Animation でうまく補間されたりされなかったりする
我こそは算術の学徒、CSS Transform など行列で書いてくれるわ。
などと意気込んで、matrix にまとめると、
意図通りに動いたり動かなかったりします。
まずは百聞は一見にしかず、デモを御覧いただきたい。
ややこしいので、おとなしく translate や rotate を使うのが吉です。
matrix の Decompose や Recompose についての詳しい仕様を知りたい人は、
W3C の Specification を読みましょう。
5. canvas の translate や scale は CSS Transfrom とほぼ同じ
canvas の Context2D には、translate や scale, rotate と言ったメソッドが生えており、
これは全く、CSS Transform のように扱え、具合が良いです（一見略）。
終わりに
百聞は一見にしかずのしかずってなんなんですかね。
100倍ってすごいな。100倍だぞ100倍
面白法人カヤックでは、この目で見たものしか信じないエンジニアを募集中です。
本当に大切なものは目に見えないんだよ。
必要なことは全てソースコードにコメントで書け。
鎌倉でも働けるのでまずはオフィスを100回見に来てください！
面白法人カヤックアドベントカレンダー、
明日は新卒の入江さんが書きます。
よろしくお願いいたします。
