CSS3 transform-记CSS3动画基础（二）

接着上一篇文章《CSS3 transition-记CSS3动画基础（一）》说CSS3动画基础,这里我将介绍一下CSS3 动画中的一个重要的属性，变换，变形（Transform）,Transform 属性允许元素脱离正常的文本流，实现一些比如移动（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）等效果, Transform在实现这些效果的时候也分为两种变换形式：2D变换、3D变换。

Transform用法：

transform: none | transform-function [transform-function]*

一、CSS 2D Transforms

CSS 2D Transform,CSS二维变换。在了解它之前，我们需要了解下这个属性：transform-origin（变换原点）。

transform-origin

transform-origin（变换原点）,这个属性定义需要变换的对象的一个原点，默认的值是50% 50%，例如rotate(),函数的变换原点就是它的几何中心。它的用法和一般的定位属性类似：

      transform-origin:  [ percentage | length | left | center | right ]
                         [ percentage | length | top | center | bottom ] ?

transform-function

下面是一个transform-function的具体的列表，囊括了transform的常用的变换函数。在使用这些函数的时候，我们可以合理运用，搭配得到想要的复杂的动画效果，各个变换函数之间用空格隔开，即可。

1、rotate()

2D旋转，rotate(angle),单位为度（deg)。

2、scale(),scaleX(),scaleY()

2D缩放，scale(numberX,numberY),放大缩小接受两个参数（分别为X方向/Y方向），如果只有一个参数，则第二个参数取第一个参数值，例如scale(2)放大一倍，scale(0.5)缩小一倍，如果参数为负数则是先缩小，然后再反向放大。

scaleX(),指仅X方向缩小，放大。即为：scale(numberX,1)

scaleY(),指仅Y方向缩小，放大。即为：scale(1,numberY)

3、skew(),skewX(),skewY()

倾斜变换，skew(angleX,angleY),与旋转一样单位为度，倾斜变换实现的是对象内的元素都按照指定的值倾斜，有继承。需要注意的是如果没有指定第二个Y参数，则Y方向没有效果，而不是和X值一样。

skewX(),指X方向上的倾斜。

skewY(),指Y方向上的倾斜。

4、translate(),translate(),translateY()

2D移动变换，translate(translation-valueX,translation-valueY),按照指定数值移动到某个坐标，变换原点为参照物。两个参数默认为0，即如果Y参数没有指定，默认为0.

translateX(),指X方向上的移动。

translateY(),指X方向上的移动。

5、matrix()

2D矩阵变换，以上的所有变换形式都可以用矩阵变换来表示，matrix(a b c d tx ty)具体的矩阵变换参数请参考谷歌，维基百科。个人不建议使用这个函数，因为一般需要用到的函数都有具体的参考，而且matrix()有点晦涩难懂，具体的数字表现出来，也没有什么可读性。下面是摘自Mozilla开发中心的一个用法，有兴趣的可以参考：

    transform:  matrix(a, c, b, d, tx, ty);

    /* Where a, b, c, d build the transformation matrix 
       ┌     ┐ 
       │ a b │
       │ c d │
       └     ┘
      and tx, ty are the translate values.  */

二、CSS 3D Transforms

CSS 3D Transform，上面我们已经了解到了一些有关于CSS3的一些二维变换，三维的就很好理解了，实质上就是在二维变换上面的提升。所以所有CSS3 2D的东西都可以用CSS3 3D Transform来表示。这里只介绍一些，3D独有的函数，其他的请参照2D变换。

transform-style

该属性定义，变换元素的嵌套子元素在3D空间中如何变换，transform-style:flat | preserve-3d，默认为flat,如果定义为flat,则其子元素变换就变成2D变换，反之为3D变换。

perspective

透视，和transform-function中的perspective函数相似，但它仅适用于定位元素或者变换对象的子元素。perspective(number),如果数值小于或者等于0，不会表现透视效果。

perspective-orgin

透视原点，参照transform-origin（变换原点）。

backface-visibility

背面元素可见性，backface-visibility:visible|hidden,例如当元素Y轴旋转时，我们可以定义当其背面面向用户时，是否可见。

transform-function 3D

很多与2D相似，请参照2D transform-function

1、translate3d()

translate3d(numberX,numberY,numberZ),需要注意的是translateZ(),不能使用百分数来表示，如果用使用转换为0.

2、scale3d()

scale3d(numberX,numberY,numberZ),X/Y/Z三个轴的放大量。

3、rotate3d()

rotate3d(numberX,numberY,numberZ,angle),前面三个数代表所描述的方向向量。

4、perspective()

透视值

4、matrix3d()

矩阵3d变换，提供matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, e, f, 0, 1)，去屎吧，我还没达到那个水平，没有研究这个，这个可以包含以上所说的所有transform-function,不管是2D还是3D的，有兴趣的童鞋自行绕道研究。

FITURE