3D转换+关键帧动画

css3 3D转换

CSS 3D转换transform(3D位移、缩放、旋转)

让元素方式3d的变换，同2d变换一样，通过transform来设置
位移：translate3D(x,y,z)
缩放：scale3d(x,y,z) scalez()不能单独使用；
旋转：rotatex(80deg) rotatey(80deg) rotatez(80deg)

它如何工作？

转换是使元素改变形状、尺寸和位置的一种效果。

可以使用 2D 或 3D 转换来转换您的元素。

在咱们的转换概念当中：是没有display这么一说的，
通过改变元素的透明度去实现从无到有
Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 仍然不支持 3D 转换（它只支持 2D 转换）。

1.观察的场所----3D空间transform-style
transform-style:preserve-3d; 表示所有子元素在3D空间呈现

2.近大远小----景深perspective
元素距离观察点的距离（物体和眼睛的距离越小，近大远小的效果越明显）
perspective:1200px;(在父元素中使用）
通常的数值在900-1200之间，如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉
3.观察3D元素的（位置）角度----景深的角度perspective-origin
perspective-origin:left top （左上角）

css3 3D转换(注意点)
这三种写法是等价
transform: translate3d(30px,30px,800px )
transform:translateZ(800px) translateX(30px) translateY(30px) ;
transform:translateZ(800px) translate(30px,30px);

preserve-3d 放到父元素

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;

Css3动画

通过 CSS3，我们能够创建动画，
这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
CSS3 @keyframes 规则

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。

在 @keyframes 中规定某项 CSS 样式，
就能创建由当前样式逐渐改为新样式的动画效果。
nternet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

2、使用方法：
第一步：@-webkit-keyframes 动画名称{
0%｛ 本关键帧中的样式｝
10%｛ 本关键帧中的样式｝
。。。。。。
100%｛ 本关键帧中的样式｝
}
第二步：动画设计好后，使用animation属性调用动画。方法如下：
想加动画元素的选择器{ -webkit-animation: move 2s 3s linear 2 normal ｝
动画名称 持续时间 延迟时间 运动形式 播放次数 是否倒放

3、实现动画的方法：
A、linear：从开始到结束都是以同样的速度进行.
B、ease-in：开始速度很慢，然后沿着曲线进行加快.
C、ease-out：开始速度很快，然后沿着曲线进行减速.
D、ease：开始时速度很快，然后沿着曲线进行减速，然后再沿着曲线加速.
E、ease-in-out：开始时速度很慢，然后沿着曲线进行加速，然后再沿着曲线减速.
F、step-start; /* 马上跳到动画每一结束桢的状态 */