こんにちは、エンジニアのつっちーです。
.foo {
transform: translateX(-50%) translateX(10px);
}みなさんは、このCSSが有効であること、ご存じだったでしょうか。CSSのtransformプロパティでは、このように同じ関数を複数回使用できます。transformにはもう何年もお世話になってきたというのに、このことは最近になって初めて気が付きました……。「そんなことも知らなかったの？」という方がほとんどだとは思いますが、忘れてしまわないように記事に残しておきます。
たとえばこんなときに
複数の単位で移動距離を指定
See the Pen
Multiple Transform Functions 1 by dsktschy (@dsktschy)
on CodePen.
See the Pen
Multiple Transform Functions 1 by dsktschy (@dsktschy)
on CodePen.
親要素の中央を基準に、X方向に60px、Y方向に30px、移動させています。このように、translate()の中で複数の単位をつかいたい場合、これまではcalc()を併用していました（.circle1）。
同じ関数を複数回つかえると気づいてからは、translate()を2回に分けて書くようになりました（.circle2）。中央への配置と中央からの移動とが分離されて、目的が読みやすくなったように感じています。
移動→回転→移動
See the Pen
Multiple Transform Functions 2 by dsktschy (@dsktschy)
on CodePen.
See the Pen
Multiple Transform Functions 2 by dsktschy (@dsktschy)
on CodePen.
親要素の中央に配置し、45度回転したあと、回転後のX方向に60px、回転後のY方向に30px、移動させています。中央への配置はrotate()より前に、回転後の移動はrotateより後に、それぞれ行う必要があるため、1回のtranslate()にまとめて書くことができません。
- (2021/7/5 14:30 訂正)
- 正しくは、X方向に60px、Y方向に30px移動し、45度回転したあと、最後に基準を親要素の中央へ変更している、です。適用順の理解を誤っていました…。ご指摘いただきありがとうございます。
これまでは、中央への配置に、transformをつかわない別の方法を採用していました（.square1）。
同じ関数を複数回つかえると気づいてからは、中央への配置も、回転後の移動も、両方ともtransformに書くようになりました（.square2）。中央へ配置する手段を複数つかい分ける必要がなくなり、いつでもシンプルな方法で実現できるようになりました。
まとめ
書かれた順に書かれた回数だけ効果が出るのは、CanvasのAPIとも似ているように感じました。
得られるメリットは小さなものですが、それでももっと早く知っていたかった…。
まだまだ知らないことばかり。精進せねば。それではまた！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
