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

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

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

つっちー
つっちー フロントエンドエンジニア / 土屋 大輔

フロントエンドエンジニアのつっちーです。 作曲してたらエンジニアになってました。 地図が好きで、一日中眺めていられます。 推しマップは路線地図。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL