web-dev-qa-db-ja.com

CSS3変換順序が重要：右端の操作が最初

CSS3 transform: operation1(...) operation2(...)を使用する場合、どちらが最初に実行されますか？

最初に実行される操作は、右側で最も実行されているようです。、つまり、ここではoperation2はoperation1の前に実行されます。 念のために言っておきますが、本当ですか？

注：私はいくつかの場所（回答、インターネット上の記事）で1つのこととその逆を読んだので、ここで質問します

csstransformcss-transforms
26
Basj

はい、最初に実行される操作は右側の操作です。つまり、ここではoperation2がoperation1の前に実行されます。

ここにドキュメントがあります： http://www.w3.org/TR/css-transforms-1/ しかし、これに関する段落はまだ見つかりません。

例1

ここでスケーリングが行われfirst、そして次に100pxの垂直方向の変換が行われます（翻訳が最初に行われた場合、スケーリングは500pxの翻訳になります！）

#container { 
        position: absolute; 
        transform: translate(0,100px) scale(5); 
        transform-Origin: 0 0; }
<div id="container"><img src="https://i.stack.imgur.com/xb47Y.jpg"></img></div>

例2

ここで、変換はfirst、そしてthenスケーリング（スケーリングdoneafterは、翻訳が500px-translationのように見えるようにします！）

#container { 
        position: absolute; 
        transform: scale(5) translate(0,100px); 
        transform-Origin: 0 0; }
<div id="container"><img src="https://i.stack.imgur.com/xb47Y.jpg"></img></div>
31
Basj

変換が実行されます左から右。変換は行列演算に対応し、これらは左から右に実行されます。

その背後には直感があり、これが規範的なルールとして文字通り仕様に含まれているだけではありません（ここでのポイント3： https://drafts.c​​sswg.org/css-transforms-1/#transform-rendering ）

これが試すペンです： https://codepen.io/monfera/pen/YLWGrM

説明：

各変換ステップは、独自の座標系を確立します。そう

transform: translateX(500px);

親のX軸に沿って500pxの新しい座標系を確立し、要素がそこにレンダリングされます。

同様に、

background-color: blue;
transform: translateX(500px) rotate(60deg);

最初に、親のX軸（右側）に沿って500pxの新しい座標系を確立し、その後、その中で（変換されますが、現在は無関係です）座標系がそれを行いますローテーションを実行します。したがって、右に500pxの形状になり、所定の位置で回転します（ローカル座標系で解釈される、いわゆるtransform-Originの周り、回転のデフォルトの50％50％は、周りを回転します長方形の中心ですが、脇にあります）。

逆順

background-color: orange;
transform: rotate(60deg) translateX(500px);

最初に、親に対して60度回転した新しい座標系を確立し、、次に現在回転している座標系のX軸に沿って、実際にはそうではない方向に100pxを変換します。ドキュメント（またはユーザー）のグローバルな視点からの権利。したがって、この場合は、最初に紙を回転させてから、形状を紙の側面に沿って500単位スライドさせたようになります（原点（この場合は左上隅）から）。

enter image description here

より高度な議論と、両方向で直感的に理解できる方法の理解については、 変換の構成 -CSS変換は乗算後のモデルに従うので、「変換をローカル座標フレームの変換と考えてください」（イラストは少しずれているようです）

Local coordinate frame - post-multiply

4
Robert Monfera