怎么使用transform

小编给大家分享一下怎么使用transform，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

　　transform是css3的新特性之一。有了它可以boxmodule变的更真实，这篇文章将全面介绍关于transform的使用。

　　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:none|transform-functions;

　　none:表示不进么变换；表示一个或多个变换函数，以空格分开；换句话说就是我们同时对一个元素进行transform的多种属性操作，例如rotate、scale、translate三种，但这里需要提醒大家的，以往我们叠加效果都是用逗号（“，”）隔开，但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。

　　transform-functions取值：transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素，他有几个属性值参数：rotate;translate;scale;skew;matrix。

看完了这篇文章，相信你对“怎么使用transform”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！