早く言ってよ〜！CSSのtransformは同じ関数を複数回つかってもOKだった | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、エンジニアのつっちーです。 .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 Funct

[spark7]

transformの順番間違えてるぽいな。「親要素の中央に配置し、45度回転したあと、回転後のX方向に60px、回転後のY方向に30px、移動させています」「ransform: translate(-50%, -50%) rotate(45deg) translate(60px, 30px);」

[mayumayu_nimolove]

使えることがそんなにいいことなのか

[Falky]

これ、見やすく書けるって話にすると話がブレるな。transform-functionは書いた回数だけ（視覚的には）書いた順に適用される、って話だね。//訂正おかしくない？元の記述の方が正しいと思うんだけど

[field_combat]

知らなかった。見た目でセンターに揃えたいときに困ってた

[Shinwiki]

関数って何だったっけね

[kvx]

はっ！[temp]