首先介绍transform变形。
transform英文意思：改变，变形。
css3中transform注意包括以下几种：旋转(rotate),扭曲(skew)，缩放（scale)、移动(translate)和矩阵变形matrix。
语法：
transform ： none | [ ]* transform: rotate | scale | skew | translate |matrix;
none就是默认值，不进行变形。
:表示一个或多个变换函数， 以空格分开 。即可同时对一个元素进行transform的多种属性操作，例如同时用rotate,scale和translate三种。
rotate( [ ])skewX( )skewY( )scale( [ ])translate( [ ])matrix( )一、旋转rotate
rotate() :通过指定的角度参数对元素指定一个2D rotation(2D旋转)，需先有 transform-origin 属性的定义。
transform-origin定义的是旋转的基点，其中angle是指选择角度，正顺时针旋转，负逆时针旋转。
二、translate平移translate()函数可以把元素从原来的位置移动，而不影响在x，y轴上的任何web组件，类似于position:relative。
translate()分三种情况：
1、translate(x,y)水平和垂直方向同时移动。
Note:translate移动的基点默认为元素中心点，可以根据transform-origin改变基点。
如果第二个值没设置，默认为0。
2、translate X (x)仅水平方向移动。
相当于translate(x,0,)的简写，基点为元素中心点。
3、translate Y (y)仅垂直方向移动。
相当于translate(0,y)的简写，基点为元素在中心。
三、scale缩放scale缩放和translate移动非常相似，也有三种情况。
缩放中心点：即元素的中心位置
基数：缩放就是既可以缩小，也可以放大；缩放基数为1，大于1放大，小于1缩小。
1、scale(x,y)元素在水平和垂直方向同时缩放。
Note：第二个参数未提供则取与第一个一样的值。
2、scaleX(x)x轴缩放。
3、scaleY(y)y轴缩放。
scale可以取负值，负值会让元素翻转并缩放。
div { width: 100px; height: 100px; border-top: 1px dotted orange; border-right: 1px solid red; border-bottom: 1px solid pink; border-left: 1px solid green; text-align: center; line-height: 100px; color: red; font-size: 15px; transform: scale(-1.5); margin: 0 auto; margin-top: 50px;} Scale(-1.5)
查看更多关于css3中变形与动画（一）_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did108753