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/> http://jsfiddle.net/joshnh/73g7t/

Here is an illustration: http://jsfiddle.net/joshnh/73g7t/

这篇关于translate vs transform-origin css3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！