translate vs transform-origin css3

2011-12-25 63 views 16 likes

我想知道如果有人能帮助我。我一直无法理解css3属性到底是什么：transform-origin。我似乎无法遵循它正在移动的方向。translate vs transform-origin css3

例如，假设您有一个方形的div，并将其旋转40度。然后执行transform-origin: 100% 0%。你不能只是做一个translateX(and some value)？在执行旋转之后，translateX似乎会沿x轴相对于新旋转的轴移动它。我似乎无法遵循变换原点正在做什么，甚至是什么。

一个清晰和彻底的例子将不胜感激。 =）

来源

2011-12-25 Sasha

一些例子：https://medium.com/hexacta-engineering/tune-your-css-transform-origin-and-rotation-visually-b043a8b1a03e – pomber 2017-04-24 15:15:54

回答

transform-origin更改元素转换的位置，而不是移动整个元素（如translate）。默认值是transform-origin: 50% 50%;。

这里有一个例子：这里http://jsfiddle.net/joshnh/73g7t/

来源

2011-12-25 02:50:27 joshnh

哦，谢谢，这很有意义！ – Sasha 2011-12-25 22:45:41

不用担心！ – joshnh 2011-12-26 08:17:33

该链接似乎现在不工作，但这确实：http://jsfiddle.net/73g7t/ – Lack 2012-04-15 01:28:36

translate vs transform-origin css3

回答

相关问题