CSS3变形笔记

主要关注2D变形，包括平移、旋转、缩放和倾斜效果，每个效果都是变形函数，可以结合css3的transition和动画的keyframe产生一些动画效果（例如结合使用transition属性，可以时变形有一个过渡的时间，而不是一下子就变形了，视觉上比较好）。

一、css3变形中的X/Y可用函数：translateX()、translateY()、scaleX（）、scaleY（）、skewX(）和skewY（）函数。

二、浏览器兼容性，为了兼容各种浏览器，在使用的过程中，为了保持浏览器的兼容性，要加浏览器的前缀，可以这样使用：

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

三、transform属性：

属性值为变形函数，可以跟多个变形函数，各个变形函数之间用空格隔开，变形函数有：translate（）、scale（）、rotate（）、skew（）。

四、transform-origin属性：

它用来改变元素原点的位置，不使用这个属性时，默认的位置为元素自己的中心位置。它的值可以是一个（另一个自动为center）或两个，可以是关键字（left 、right、top、bottom、center等）、百分数、数字值等。

 

下面是2D变形函数：

一、2D移位：translate（）函数，使用方式：

translate（tx）、translate（tx，ty），前者相当于ty为零，tx和ty可以取正值（向右/下移动）、负值（向左/上）移动。另外有针对水平和垂直移动的两个函数;translateX()和translateY（）。

二、2D缩放：scale（）函数：

scale（sx）、scale（sx，sy），值小于1就缩小，大于1就放大。另外有：scaleX（）和scaleY（）函数。

注意：scale（）函数的值可以为负值，不过此时会让元素进行翻转，然后再进行缩放。

三、2D旋转：rotate（）函数

参数值为正数则元素相对于原点中心顺时针旋转，为负值则逆时针旋转。

四、2D倾斜：skew（)函数，可以skew（ax）或skew（ax，ay），ax为水平方向（X轴）倾斜的角度，ay为垂直方向（y轴）倾斜的角度。另外有：skewX（）和skewY（）函数。

五、2D矩阵，可以进行复杂的变形，未完待续。。。