-ms-,-moz-,-webkit-

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Dream_ling/article/details/75000601

-ms-transform:rotate(7deg); 
-moz-transform:rotate(7deg); 
-webkit-transform:rotate(7deg); 
-o-transform:rotate(7deg); 

这啥意思呢?

Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate

语法
transform : none | <transform-function> [ <transform-function> ]* 
   也就是:
transform: rotate | scale | skew | translate |matrix;

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

语法
transform : none | <transform-function> [ <transform-function> ]* 
   也就是:
transform: rotate | scale | skew | translate |matrix;

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

取值:

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

一、旋转rotate

rotate(<angle>) :通过指定的角度参数对原元素指定一个2D rotation(2D

旋转),需先有transform-origin属性的定义。transform-origin定义的是旋转的基点,其中angle是指旋转角度,如果设

取值:

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

一、旋转rotate

rotate(<angle>) :通过指定的角度参数对原元素指定一个2D rotation(2D

旋转),需先有transform-origin属性的定义。transform-origin定义的是旋转的基点,其中angle是指旋转角度,如果设
置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。如:transform:rotate(30deg):

-ms-transform:rotate(7deg);                //-ms代表ie内核识别码
-moz-transform:rotate(7deg);             //-moz代表火狐内核识别码
-webkit-transform:rotate(7deg);         //-webkit代表谷歌内核识别码
-o-transform:rotate(7deg);               //-o代表欧朋【opera】内核识别码
transform:rotate(7deg);                   //统一标识语句。。。最好这句话也写下去,符合w3c标准

使用css3属性时,大部分都要带这些识别前缀,早期点的浏览器才能识别,后来有整合一个js文件的,不写这个你也可以网上搜索下这个文件,嵌入你的页面就好了

-ms-transform:rotate(7deg);                //-ms代表ie内核识别码
-moz-transform:rotate(7deg);             //-moz代表火狐内核识别码
-webkit-transform:rotate(7deg);         //-webkit代表谷歌内核识别码
-o-transform:rotate(7deg);               //-o代表欧朋【opera】内核识别码
transform:rotate(7deg);                   //统一标识语句。。。最好这句话也写下去,符合w3c标准

使用css3属性时,大部分都要带这些识别前缀,早期点的浏览器才能识别,后来有整合一个js文件的,不写这个你也可以网上搜索下这个文件,嵌入你的页面就好了

猜你喜欢

转载自blog.csdn.net/Dream_ling/article/details/75000601
ms
今日推荐