使用transform的方法

这篇文章主要介绍使用transform的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

　　transform是css3的新特性之一。有了它可以boxmodule变的更真实，这篇文章将全面介绍关于transform的使用。transform可以让元素应用2D或3D转换。该属性允许我们对元素进行旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。这些属性定义上都从属于transform，因此把它们直接作为transform的value来表达。

　　transform的兼容写法

　　当然使用css3的实现一般都不会兼容低版面的IE,这里整理其他浏览器的兼容写法如下：

div
　　{
　　transform:rotate(7deg);
　　-ms-transform:rotate(7deg);/*IE9*/
　　-moz-transform:rotate(7deg);/*Firefox*/
　　-webkit-transform:rotate(7deg);/*Safari和Chrome*/
　　-o-transform:rotate(7deg);/*Opera*/
　　}

　　说明：InternetExplorer9支持替代的-ms-transform属性（仅适用于2D转换）。Safari和Chrome支持替代的-webkit-transform属性（3D和2D转换）。Opera只支持2D转换。

　　transform常用属性

　　transform:rotate()：

　　旋转；单位deg，设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。

　　transform:translate()：

　　移动/位移；向右向上为整数，向左向下位移则为负“-”。

　　translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动）。

以上是“使用transform的方法”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！

使用transform的方法

相关推荐