css3 3D

● css3 3D旋转
○ rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转
○ rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
○ rotateZ(angle)，定义沿 Z 轴的 3D 旋转。
● 3D景深
○ perspective(n)，景深，离屏幕多远的距离去观察屏幕。（值越大幅度越小）
○ perspective-origin景深的基点。该属性允许改变 3D 元素的底部位置。（就是观察角度）
● css3 3D平移
○ translateZ(z),z轴平移
● css 3D立体空间
○ transform-origin:(x,y,z)设置旋转元素的基点位置,该属性必须与 transform 属性一同使用。
○ transform-style:flat(子元素不保留其3d位置)/preserve-3d（子元素保留其3d位置）规定被嵌套元素如何在 3D 空间中显示。
○ backface-visibility定义元素在不面对屏幕时是否可见。（了解）
● css3 3D缩放
○ scaleZ(z)定义 3D 缩放转换，通过给定一个 Z 轴的值
注释：Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 仍然不支持 3D 转换（它只支持 2D 转换）。
● css3 动画
○ @keyframes 规则 用于创建动画。在 @keyframes 中规定某项 CSS 样式，能创建由当前样式逐渐改为新样式的动画效果。
○ animation-name规定 @keyframes 动画的名称。
○ animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0
○ animation-timing-function规定动画的速度曲线。默认是 "ease"
● ease规定慢速开始，然后变快，然后慢速结束的过渡效果
● linear规定以相同速度开始至结束的过渡效果
● ease-in规定以慢速开始的过渡效果
● ease-out规定以慢速结束的过渡效果
● ease-in-out规定以慢速开始和结束的过渡效果
● step-start跳到每帧开始
● step-end跳到每帧结束
○ animation-delay规定动画何时开始。默认是 0，允许负值；
○ animation-iteration-count规定动画被播放的次数。默认是 1，
■ infinite无限循环
○ animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"
■ alternate反向播放
○ animation:name duration timing-function delay iteration-count direction;
○ animation-play-state规定动画是否正在运行或暂停。默认是 "running"。
■ paused暂停
○ animation-fill-mode规定对象动画时间之外的状态。
■ none不改变默认行为
■ forwards当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
注释：在 @keyframes 中创建动画时，把它捆绑到某个选择器，否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性，即可将动画绑 定到选择器：
1.规定动画的名称
2.规定动画的时长
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。