多语言展示
当前在线:1106今日阅读:75今日分享:44

如何使用CSS3 transform-origin 属性

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

dreamweaver

方法/步骤
1

代码应用举例。在这个例子当中,我们可以看出来,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 */}

2

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

3

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

4

java 用法: object.style.transformOrigin='20% 40%'也是x轴与y 轴的百分比必须给到。

5

语法:transform-origin: x-axis y-axis z-axis; 在这个语法里面,我们可以看出来,transform-origin 有三个轴向的参数值

6

x-axis 的参数值:left/right/center/%/lengthy-axis 的参数值:top/bottom/center/%/lengthZ-axis 的参数值:length

推荐信息