怎么使用变换

  介绍

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

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

<强>变换的作用

变换可以让元素应用2 d或3 d转换。该属性允许我们对元素进行旋转旋转,扭曲斜,缩放规模和移动翻译以及矩阵变形矩阵。这些属性定义上都从属于变换,因此把它们直接作为变换的值来表达。

<强>变换的兼容写法

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

div   {   变换:旋转(7度);   -ms-transform:旋转(7度),/* IE9 */-moz-transform:旋转(7度),/* Firefox */-webkit-transform:旋转(7度),/* Safari和Chrome */-o-transform:旋转(7度),/* */}

说明:InternetExplorer9支持替代的-ms-transform属性(仅适用于2 d转换).Safari和Chrome支持替代的-webkit-transform属性(3 d和2 d转换).Opera只支持2 d转换。

<强>变换语法

变换:没有|转换函数;

没有:表示不进么变换;表示一个或多个变换函数,以空格分开;换句话说就是我们同时对一个元素进行变换的多种属性操作,例如旋转、规模、翻译三种,但这里需要提醒大家的,以往我们叠加效果都是用逗号(",")隔开,但变换中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。

转换函数取值:变换属性实现了一些可用SVG实现的同样的功能。它可用于内联(内联)元素和块级(块)元素。它允许我们旋转,缩放和移动元素,他有几个属性值参数:旋转;翻译;规模;倾斜;矩阵。

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

怎么使用变换