如何使用CSS3 transform-origin 属性

 时间:2026-02-14 22:39:45

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 */}

如何使用CSS3 transform-origin 属性

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

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

如何使用CSS3 transform-origin 属性

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

如何使用CSS3 transform-origin 属性

4、java 用法: object.style.transformOrigin="20% 40%"

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

如何使用CSS3 transform-origin 属性

5、语法:transform-origin: x-axis y-axis z-axis; 

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

如何使用CSS3 transform-origin 属性

6、x-axis 的参数值:left/right/center/%/length

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

Z-axis 的参数值:length

如何使用CSS3 transform-origin 属性

  • CSS a链接的四种状态
  • 如何在myeclipse中新建一个项目并输出一句话
  • 如何修改eclipse默认的工作空间路径及字体显示
  • C#如何判断当前月有多少天
  • C#语言入门---逻辑类型
  • 热门搜索
    感冒咳嗽怎么办 眼睛红是怎么回事 麦克风没声音怎么设置 ppt页码怎么设置 广州塔怎么去 黄褐斑怎么去除效果好 鑫谷电源怎么样 拼多多怎么退款 头发有静电怎么办 师傅的老公怎么称呼