CSS3-transform属性

来源:互联网 发布:双阳网络 编辑:程序博客网 时间:2024/05/20 15:38

transform:变换
transform包含四种几本的变换:平移、旋转、缩放、倾斜。但这个属性在浏览器上的兼容性有区别。


浏览器支持:
IE Firefox Chrome Safari Opera 都支持
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。
Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。
Opera 只支持 2D 转换。

所以在设置时要采用兼容写法:

box{    transform:rotate(20deg);    -ms-transform:rotate(20deg);//IE    -moz-transform:rotate(20deg);//Firefox    -webkit-transform:rotate(20deg);//Safari,Chrome    -o-transform:rotate(20deg);//Opera}

JS语法:

object.style.transform="rotate(7deg)"

这里写图片描述

W3C:transform属性,包含测试实例

注:旋转(ratate)、倾斜(skew)的单位都是deg(degree),度数、角度.
平移(translate)的单位为px。

box{    transform:translateX(10px);    transform:rotate(10deg);    transform:scale(2,2);    transform:skew(20deg);}
0 0
原创粉丝点击