20150808 CSS3 3D特效

transition
CSS3.0的动画功能：transition、animation关键帧。
transtion:<过度属性名称> <过渡时间>  
兼容：-webkit-transition  -moz-transition  -o-transition  
属性transition-property:color;时间transition-duration:1s;模式transition-timing-function:ease/linear/ease-in/ease-out/ease-in-out详情见CSS3基础


创建3D场景
与三维物体的距离：perspective
观察三维物体的视点：perspective-origin
三维空间属性 transform-style:preserve-3d;
使用transform属性调整元素  位移操作translate:translateX translateY translateZ 旋转操作rotate:rotateX rotateY rotateZ
旋转中心：transform-origin：x轴=left/center/right y轴=top/center/bottom z轴=length px


创建3D动画效果
animation:thd 5s linear infinite;
@keyframes thd{
    0%{
        -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
                transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100%{
        -webkit-transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
                transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}