前端基础（11）：CSS3 3d
学习目标
-
1、3D
-
2、CSS3动画
一、CSS3 转换
转换是使元素改变形状、尺寸和位置的一种效果。
您可以使用 2D 或 3D 转换来转换您的元素。
在咱们的转换概念当中：是没有display这么一说的，通过改变元素的透明度去实现从无到有
１、3D 转换
说明：CSS3 允许您使用 3D 转换来对元素进行格式化。
1）rotate() 旋转函数 取值度数 ,单位：deg
通过 rotate() 方法，元素顺时针旋转给定的角度。
允许负值，元素将逆时针旋转。
rotateX() rotateY() rotateZ()
2）translate() 位移函数，元素从其当前位置移动：
这三种写法是等价
transform:translateZ(800px) translateX(30px) translateY(30px);
transform:translateZ(800px) translate(30px,30px);
transform: translate3d(30px,30px,800px)
２、创建3d场景｛Perspective:800px;｝
径深说明：（增加一个维度/窗口）表示浏览器对我将要观察到的三维物体有800px那么远
perspective-origin:; 视角观察三维物体的角度
用法：
perspective属性有两种书写形式
1）写在舞台元素上（动画元素们的共同父辈元素）以父元素的视角为中心观看；
示例：
.box{
perspective: 1200px;
}
2）写在当前动画元素上（起效果的那个元素），与transform的其他属性写在一起，以子元素为中心来观看。
示例：
.box div{
transform:perspective(1200px) translateZ(300px) translate(30px,30px);
}
２、规定被嵌套元素如何在 3D 空间中显示。｛transform-style:preserve-3d ｝
说明：告诉浏览器之后进行的transform都是对3d的世界进行了transform-style:preserve-3d 一定要加给transform的父元素
3、｛backface-visibility：hidden｝
说明：定义元素在不面对屏幕时是否可见。
二、CSS3动画
什么是 CSS3 中的动画？
动画是使元素从一种样式逐渐变化为另一种样式的效果。 您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
通过 CSS3，我们能够创建动画， 这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript
1.CSS3 @keyframes 规则
@keyframes myfirst {
from {background: red;} to {background: yellow;}
}
@keyframes 规则用于创建动画。
在 @keyframes 中规定某项 CSS 样式， 就能创建由当前样式逐渐改为新样式的动画效果。
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属 性。
注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
2.
animation:myfirst 5s;
当您在 @keyframes 中创建动画时， 请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
规定动画的名称 规定动画的时长
把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：
3.animation
1）animation-name动画名称（关键帧名称）
2）animation-duration 动画持续时间
3）animation-delay动画延迟
4）animation-iteration-count重复次数 infinite为无限次 / value;一个数字，定义应该播放多少次动画
5）animation-direction播放前重置 （动画是否重置后再开始播放）
alternate动画直接从上一次停止的位置开始执行
normal动画第二次直接跳到0%的状态开始执行
6）animation-play-state 播放状态
running 播放
paused 暂停
7）animation-fill-mode规定对象动画时间之外的状态。
Forwards 当动画完成后，在最后一个关键帧中
Backwards 在 animation-delay 所指定的时间之前，应用在第一个关键帧中
Both 向前和向后填充模式都被应用。
None 不改变默认行为
8）animation-timing-function动画运动 形式
linear匀速。
ease缓冲。
ease-in由慢到快。
ease-out由快到慢。
ease-in-out由慢到快再到慢。
step-start 动画分成10步，动画执行时为开始左侧端点的部分为开始。
step-end 动画分成10步，动画执行时以结尾端点为开始，默认值为 end。
指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。