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

前端之家收集整理的这篇文章主要介绍了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>
原文链接:https://www.f2er.com/css/218782.html

猜你在找的CSS相关文章