私が輝く、夏がはじまる。
私が輝く、夏がはじまる。

早く言ってよ〜!CSSのtransformは同じ関数を複数回つかってもOKだった

つっちー

こんにちは、エンジニアのつっちーです。

.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とも似ているように感じました。
得られるメリットは小さなものですが、それでももっと早く知っていたかった…。
まだまだ知らないことばかり。精進せねば。それではまた!

3 0 0 0