CSS动画

[magicdawn]

2D http://www.zhangxinxu.com/wordpress/2010/11/css3-transitions-transforms%E5%92%8Canimation%E4%BD%BF%E7%94%A8%E7%AE%80%E4%BB%8B%E4%B8%8E%E5%BA%94%E7%94%A8%E5%B1%95%E7%A4%BA/

3D http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

perspective

比方说，一个1680像素宽的显示器中有张美女图片，应用了3D transform，同时，该元素或该元素父辈元素设置的perspective大小为2000像素。则这张美女多呈现的3D效果就跟你本人在1.2个显示器宽度的地方(1680*1.2≈2000)看到的真实效果一致！！

perspective:2000px;

translateZ

当translateZ为正值的时候，元素会向其面对的方向走去,
例如
perspective 设为 200px
translateZ 设为 50px

相当于在200px - 50px 的距离观看

perspective-origin

表示视点的xy坐标
perspective和translateZ 其实就是确定z坐标

transition

其作用是：平滑的改变CSS的值。无论是点击事件，焦点事件，还是鼠标hover，只要值改变了，就是平滑的，就是动画。

transition-property :* //指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡
transition-duration://指定这个过渡的持续时间
transition-delay: //延迟过渡时间
transition-timing-function:*//指定过渡类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

selector{
    /* 属性 duration 过度类型 */
    transition: background-color 2s ease-in;
}

transform

transform指变换

.selector{
    transform: rotateY(180);
}

transform-style: preserve-3d|flat;
表示变换表现是3D还是平面的,通常都设为preserve-3d

backfsce-visibility

visible | hidden;

后面元素的可见性