CSS3 3D动画（一）

CSS3 3D动画知识点详解

这篇文章的主要内容是关于css3关于新增3d部分的一个解析，那么下一篇内容我们将会进行一个3D相册的一个练习。
由于CSS3的新增还有很多浏览器的不支持，所以我们简单说一下浏览器的兼容情况。（图片来源于菜鸟教程）

在开始讲解各个属性之前我们先看一下关于页面上的直角坐标系，上过高中的应该都清楚，那么这里我简单的画一下关于电脑上的直角坐标系

关于2d的直角坐标系就如上图所示，很显然，原点是位于浏览器可视区域的左上角，那么3d坐标系的z轴是画不出来的，z轴是垂直于屏幕，也就是指向自己的一条直线，这个需要自己有一点空间想象力。

transfrom

我们介绍第一个属性tramsfrom,它主要用于浏览器上2d或者3d的转换。
那么我们主要介绍以下几个属性（x,y,z为坐标轴上的值）：

translate（x,y）

主要用于2d图形的转换，大家可以理解为平移，在浏览器当中的平移，有点类似于position定位。

translate3d（x,y,z）

用于3d图形的平移，不过是三个方向的平移，是一个符合属性，可以拆分为三个api，translateX(),translateY(),translateZ()，x,y,z的值可填写常用的距离单位。

scale(x,y)

用于2d图像的缩放变化，常用的一个scale(-1，1)用于对图像的水平对称交换，x，y的值是相对于原图像的倍数变化，假设你要将x轴放大1.2倍，那么将x处的值填写为1.2

scale3d(x,y,z)

用于3d图像的缩放变化，参数填写参照2d缩放。当然这也是个复合属性，可分解为scaleX()，scaleY()，scaleZ()

rotate(angle)

用于2d旋转，angle为旋转的角度，单位为deg

rotate3d(angle)

用于3d旋转，angle为旋转的角度，单位为deg。同样为复合属性，可分解为，rotateX(angle)，rotateY(angle)，rotateZ(angle)。

skew(x-angle,y-angle)

用于2d倾斜，可以理解为扭曲，单位同样是角度deg，这个属性没有3d变换，但同样他是个复合属性，可分解为 skewX(x-angle)，skewY(y-angle)

以上属性请大家自行验证，附上效果图的话过于繁琐，并且并不难理解

perspective(n)

这个属性主要是用于控制视点距离，n为视点距离，举个简单的例子，我站在500米和站在800米的地方观察同一个物体，这个物体是大小不一样的，站的越远，观察到这个物体越小。

transform-origin(x-axis,y-axis,z-axis)

这个属性允许您改变被转换元素的位置。简单的说一下这个属性用于元素将要进行变化的时候，以某个点来变化，比如说它的默认值（50%，50%，0），如果我们要将元素旋转，那么将会以这个点为旋转轴开始旋转，其他变化也相同。可能的值有：
left
center
right
length
%

transfrom-style:preserve-3d;

该属性用于将该元素在3D空间中呈现，记得该属性常放置于父级；

backface-visibility

属性定义当元素不面向屏幕时是否可见，常用的值有两个：
visible 背面是可见的。
hidden 背面是不可见的。
默认是可见的。

@keyframes 名字

该属性是用于创建动画，简单点说就是将一种css样式转化为另一种css样式，更简单点可以理解为函数，创建了一个函数，需要animation调用才能够使用，格式如下，也可将from to替换为百分数，理解为进度
{
from {top:0px;}
to {top:200px;}
}

animation

该属性能够让动画动起来。该属性是个复合属性，可以拆分为：
animation-name 规定需要绑定到选择器的 keyframe 名称。。

animation-duration 规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function 规定动画的速度曲线（linear 动画从头到尾的速度是相同的。ease 默认。动画以低速开始，然后加快，在结束前变慢。ease-in 动画以低速开始。ease-out 动画以低速结束。ease-in-out 动画以低速开始和结束。）。

animation-delay 规定在动画开始之前的延迟（在多少时间后开始动画，单位以秒或毫秒计数）。

animation-iteration-count 规定动画应该播放的次数 （infinite 规定动画应该无限次播放）。

animation-direction 规定是否应该轮流反向播放动画（normal 默认值。动画应该正常播放。alternate 动画应该轮流反向播放。）。

大家看起来可能会觉得很多很难记忆。但是大家记住一些比较常用的就基本够用了，还有手册能够帮助我们方便查询。
下次我们将书写一个简单的3D画册来方便我们记忆和使用这些属性和方法。
今天的笔记就到这里，如有错误或者遗漏请指出，将及时修改。