如何使用CSS3 transform-origin 属性

如何使用CSS3 transform-origin 属性

在网页当中让一个元素的位置发生改变是常常会遇到的，当这种情况发生的时候，我们就要用到这种元素位置改变的代码。transform-origin 就是其中一个重要的代码。

代码应用举例。在这个例子当中，我们可以看出来，transform-origin与transform：rotate常常一起使用的，这样才能更好的表达元素的运动轨迹。

div{transform: rotate(45deg);

transform-origin:20% 40%;

-ms-transform: rotate(45deg); /* IE 9 */

-ms-transform-origin:20% 40%; /* IE 9 */

-webkit-transform: rotate(45deg); /* Safari 和 Chrome */

-webkit-transform-origin:20% 40%; /* Safari 和 Chrome */

-moz-transform: rotate(45deg); /* Firefox */

-moz-transform-origin:20% 40%; /* Firefox */

-o-transform: rotate(45deg); /* Opera */

-o-transform-origin:20% 40%; /* Opera */}

从上个例子，我们也可以看出来，transform-origin 的浏览器用法稍有不同的。在 IE中用了 -ms- 的前缀 ， 在 safari 中用了 -webkit-的前缀

在 firefox中用了 -moz- 的前缀。

transform-origin的用法。它的默认值是 50%，50%，0 它的继承性是 no 它的版本是 CSS3

java 用法：object.style.transformOrigin="20% 40%"

也是x轴与y 轴的百分比必须给到。

语法：transform-origin: x-axis y-axis z-axis;

在这个语法里面，我们可以看出来，transform-origin 有三个轴向的参数值

x-axis 的参数值：left/right/center/%/length

y-axis 的参数值：top/bottom/center/%/length

Z-axis 的参数值：length