CSS3 变形

网页中除了文字之外，对于形状的调制和控制也是非常重要的一环。在CSS3之前，需要对形状和图片进行调整，往往通过Flash和JavaScript才能完成，现在可以通过CSS3的2D变换和3D变换来轻松实现效果。

实现变形效果的方法是在元素样式中定义transform属性，属性的值是变形函数和参数

2D变形

2D变形通过变形函数和transform-origin属性配合使用，即可在2D上任意改变形状。

变形函数
函数	解释
translate(x,y)	平移该元素，x和y可以为正数或负数，有两个分支translateX和translateY，单独控制X轴和Y轴，也可以用百分比。
scale(x,y)	水平和竖直缩放，小于1表示缩小，大于1表示放大。也有scaleX和scaleY两个版本。
rotate(deg)	旋转角度，deg为角度。
skew(deg, deg)	让元素倾斜，分别表示横向和纵向倾斜，可以为负数。第二个参数可以不写，默认为0
matrix(x,y)	定义矩阵变形，基于x和y重新确定元素的位置。

上边所有的变形效果，都是基于形状的中心部分，还有一个参数 transform-origin 用来控制中心点，可以用百分比或者像素值或者TRBL，如果设置为0,0表示形状的左上角。

这个原点除了方位，也会影响到缩放，旋转等计算的起点。只有translate不受影响，始终以元素中心位置计算偏移量。

3D变形

3D变形其实是在2D变形的基础上，引入了3D空间，多了Z轴。所有的2D变换函数也在3D中有效，然后增加了针对Y轴的变换函数和新的属性。

理解3D变形首先就是要理解现在的X,Y,Z轴和原来2D的X,Y轴有所不同。多了一个Z轴，可以理解为离我们越近，Z越大。所有的翻转在启用3D空间的时候完全不同了。

3D变形的流程是：启动3D空间--->设置原点和视角--->进行变换

先用一个简单的例子说明3D空间：

body {
    width: 800px;
    height: 500px;
    margin:  auto;
    border: 1px solid #000;
    transform-style: preserve-3d;
    perspective: 600px;
}

div {
    width: 300px;
    height: 300px;
    margin: 100px auto 100px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    background-color: #1e7145;
    font-size: 80px;
    line-height: 300px;
    text-align: center;
    color: #fff;
    transition: 1s;
}

div:hover {
    transform:rotateX(360deg);
    transform-origin: 50% 50%;
}

这一段是让div沿着X轴的中心翻转，注意 transform-style: preserve-3d; 和 perspective: 600px;这两个属性，必须加在想要进行3D变换的父元素上。启用了3D空间后，原来仅仅是2D平面投影的rotateX就变成了带有景深效果（近大远小）的3D翻转。Z轴就是垂直于屏幕的轴，围绕Z轴旋转就是在屏幕这个2D平面上旋转。

3D变形函数和属性

了解了基本的3D变化，来看一看3D变形函数和控制属性

3D变形函数
函数	解说
translate3d(x,y,z)	3D空间里移动元素。需要指定3个值，x为正值向右移动，y为正值向下移动，z为正值朝着用户移动。x和y也可以是百分比，z只能是数值。
translateXYZ(n)	这些函数在3D空间内依然有效，还新增了Z轴。
scale3D(x,y)	在x和y轴方向缩放
scaleXYZ(n)	这些函数在3D空间依然有效，新增了Z轴
rotate3d(x,y,z,deg)	x,y,z就是数值，不用带像素等后缀，最后一个是角度，控制元素在3D空间里旋转
rotateXYZ(n)	这些函数在3D空间依然有效，新增了Z轴
属性
属性名	解说
transform-origin: x y z	3D变形的时候该参数依然适用，包括了第三个值即Z的值，还可以使用TRBL关键字，x和y可以使用百分比，z只能使用数值。依然不会影响translate系列函数。
transform-style	这个属性的值只有两个可以选，选flat表示不启用3D空间，选preserve-3d启用3D空间。必须将该属性设置在需要3D变换的元素的父元素上。
perspective	这个属性表示离3D物体的距离有多远来观看这个物体，值为一个像素值，表示离3D物体多远来看东西
perspective-origin	这个是决定perspective观察的位置，接受两个值或者一个值，为长度值，默认为50% 50% ，即对着物体的中央，可以用百分比或者像素来移动视点。x和y表示相对于元素的包含框的位置。
backface-visiblity	属性有两个值，visible和hidden，表示元素的背面对着用户的时候，就不显示

3D特效的关键有两个，第一个是设置从哪里看过去以及视角，设置的比较远，元素转起来不会改变宽高。设置的比较近，则透视效果强。二是将所需要的元素排布好，一般是排在同一个父元素里，然后找准基线，合并成一个盒子或者空间，然后展示出来。