在学习前端的过程中碰到一下代码，对此次学习经过做次记录
-ms-transform:rotate(7deg);
-moz-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
-o-transform:rotate(7deg);
Transform:变形，改变。
在CSS3中transform主要包括以下几种：rotate(旋转)、skew(倾斜)、scale(缩放)和translate(移动)、matrix(矩阵变换)。
<h3>语法</h3>
transform ： none | <transform-function> [ <transform-function> ]*
也就是：
transform: rotate | scale | skew | translate |matrix;
none:表示不进行变换
<transform-function>表示一个或多个变换函数，以空格分开；也就是同时对一个元素进行多种transform的操作，多种操作以空格隔开。以往我们叠加效果都是用逗号（“,”）隔开，但transform中使用多个属性时却需要有空格隔开。记住：用空格隔开
<h3>取值</h3>
transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许开发者旋转、缩放
和移动元素 ，它有几个属性值参数：rotate;translate;scale;skew;matrix。
旋转rotate
rotate(<angle>) ：通过指定的角度参数对原元素指定一个2D rotation（2D旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg):
<h3>关于transform的前缀</h3>
-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文件的，不写这个你也可以网上搜索下这个文件，嵌入你的页面就好了
网友评论