CSS3转换顺序重要:最先操作

当我们使用CSS3变换:operation1(…)operation2(…),哪一个先做?

一个操作完成似乎是最右边的操作,即这里的operation2在操作前完成1。只要确定,是真的吗?

注意:我在某些地方阅读了一件事情和相反的内容(答案,互联网上的文章),因此就是这个问题。

解决方法

是的,第一个操作是最右边的操作,即这里的operation2在操作前完成1。

这是文档: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>

实施例2

这里翻译首先完成,然后缩放(缩放完成后,使翻译看起来像一个500px的翻译!)

#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如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效