translate vs transform-origin css3 [英] translate vs transform-origin css3
问题描述
我想知道是否有人可以帮助我。我一直无法理解什么是css3属性: transform-origin
。
I was wondering if someone could help me. I've been having trouble understanding what exactly is the css3 property: transform-origin
. I can't seem to follow the direction it is moving.
例如,假设您有一个方形的div,并将它旋转40度。然后执行 transform-origin:100%0%
。你不能只是做一个 translateX(和一些价值)
?看起来translateX将在执行旋转后相对于新旋转的轴沿着x轴移动它。我似乎不能跟随变换起源正在做什么,或者什么是甚至是什么。
So for example, lets say you have a square div, and you rotate it 40 degrees. and then you perform a transform-origin: 100% 0%
. can't you just do a translateX(and some value)
? It seems like translateX will move it along the x-axis with respect to the newly rotated axis after performing a rotate. I can't seem to follow what transform-origin is doing, or what exactly it even is.
一个清晰和彻底的例子将是非常感激。 =)
A clear and thorough example would be much appreciated. =)
推荐答案
transform-origin
更改元素转换而不是移动整个元素(如translate)。默认值为 transform-origin:50%50%;
。
transform-origin
changes the point at which the element transforms rather than moving the entire element (as translate would). The default value is transform-origin: 50% 50%;
.
=http://jsfiddle.net/joshnh/73g7t/ =noreferrer> http://jsfiddle.net/joshnh/73g7t/
Here is an illustration: http://jsfiddle.net/joshnh/73g7t/
这篇关于translate vs transform-origin css3的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!