CSS3转换顺序问题：最右边的操作第一 [英] CSS3 transform order matters: rightmost operation first

问题描述

当我们使用CSS3 transform：operation1（...）operation2（...），哪一个先完成？ p>

第一个操作似乎是右边最常用的操作。，例如 operation2 在 operation1 之前完成。 确定，是真的吗

注意：我在某些地方读过一件事，

解决方案

是的，第一个操作是大多数在右边，即这里 operation2 在 operation1 之前完成。

以下是文档： http：//www.w3 .org / TR / css-transforms-1 / ，但我还没有找到关于此的段落。

---

示例1

这里首先缩放，然后 100px垂直（如果首先翻译，缩放将翻译500px！）

  #container {position：absolute; transform：translate（0,100px）scale（5）; transform-origin：0 0; }  

 < div id =container> ; img src =http://gget.it/6fb0n028/pixelgrid.jpg>< / img>< / div>  

/ div>

示例2

这里首先进行翻译 之后，缩放（之后的缩放使翻译看起来像一个500像素的翻译！）

  #container {position：absolute; transform：scale（5）translate（0,100px）; transform-origin：0 0; }  

 < div id =container> ; img src =http://gget.it/6fb0n028/pixelgrid.jpg>< / img>< / div>  

/ div>

When we use CSS3 transform: operation1(...) operation2(...), which one is done first?

The first operation done seems to be the one the most on the right., i.e. here operation2 is done before operation1. Just to be sure, is it true?

Note: I have read one thing and its contrary in some places (answers, articles on the internet), thus the question here.

解决方案

Yes, the first operation done is the one the most on the right., i.e. here operation2 is done before operation1.

Here is the documentation : http://www.w3.org/TR/css-transforms-1/ but I haven't found the paragraph about this yet.

---

Example 1

Here the scaling is done first, and then the translation of 100px vertically (if translation was done first, the scaling would make the translation of 500px!)

#container { 
  	position: absolute; 
  	transform: translate(0,100px) scale(5); 
  	transform-origin: 0 0; }

<div id="container"><img src="http://gget.it/6fb0n028/pixelgrid.jpg"></img></div>

Example 2

Here the translation is done first, and then the scaling (the scaling done after makes that the translation looks like a 500px-translation!)

#container { 
  	position: absolute; 
  	transform: scale(5) translate(0,100px); 
  	transform-origin: 0 0; }

<div id="container"><img src="http://gget.it/6fb0n028/pixelgrid.jpg"></img></div>

这篇关于CSS3转换顺序问题：最右边的操作第一的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！