动画与景深++

animation

http://blog.csdn.net/zj831007/article/details/7427752

.box{width:100px;height:100px;background-color:red;animation: move 2s  infinite alternate;}
                    /*infinite:show animation infinite
                      linear:
                      alternate:原路返回,grew then shrink to normal

                      it' can make as a progres bar.
                    */

.box{animation: move 2s  infinite alternate;}

代表这个动作叫作”move”是 历时两秒(2s),

次数(infinite)

alternate(原路返回)

keyframes关键针

@keyframes move{
                    from{width:100px;}
                    /* "grow"is a name,used for keyframes match to ther right animation property*/
                    to{width:300px;height:100px;}
                    /* "from" and "to" stand for the anmatiom's 阶段section */
                }
                 /* "grow"is a name,used for keyframes match to ther right animation property*/

move是animation的命名名称

@keyframes grow{
            /*from{width: 0%;}
            to{width: 100%;}*/
            0%{
                width: 0%;
            }
            50%{
                width: 99%;
            }
            80%{
                width: 99%;
            }
            100%{
                width: 100%;
            }
        }

这个表示了keyframes(关键针) 的变化的阶阶段(seciton)应该呈现什么样的状态.

从小到大,从无到有

        @keyframes load{
            from{opacity: 1;transform: scale(0.3);}
            to{opacity: 0;transform: scale(1.2);}
        }
        /*从透明变消失,从0.3倍大小,变为1.2倍大小*/

每个小孩挨个出来

第一个小孩等0.13s出来

第二个…

…

       .box{width: 100px;height: 100px;background: pink;margin: 0 auto;animation: move 2s 3}
       /*变化2s每次,总计3次(times)*/
        /* 写的时候变化的属性要一一对应 */
        @keyframes move{
            0%{
                transform: scale(1) translateY(0px) rotate(0deg);
                /*变化属性原大小,*/
            }
            50%{
                transform: scale(1.5) translateY(200px) rotate(360deg);
                /*变为1.5倍大小,轴移动200px,旋转360度*/
            }
            100%{
                transform: scale(1) translateY(0) rotate(0deg);
                /*这个阶段,恢复正常状态*/
            }
        }

景深 Depth of Field

http://www.webhek.com/post/css-3d-rotate-cube.html

立体感中的远近感就叫作景深.

​ 目的就是为了产生立体感.

transform: rotateX(45deg);

rotateX

ratateY

rotateZ

加入了景深这后具有了立体感

.stage {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin: 100px auto;
    perspective: 500px; /*增*/
}
.stage .demo {
    width: 200px;
    height: 200px;
    background-color: orangered;
    transform: rotateX(45deg);
}

在stage里定义了这个stage离我有500px,所以基于这个3d模板,其子元素demo旋转,就产生了3d的效果,也就是先有景深,再旋,就是3d旋转.

perspective-origin

刚才我说道我们的肉眼相当于在舞台元素中心的位置，其实这个“眼睛”的位置是可以调整的，这用到了perspective-origin属性，默认的属性值就是 50% 50%，也就是舞台元素的中心位置，我们可以尝试调整视角。

.stage {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin: 100px auto;
    perspective: 500px;
    perspective-origin: 10px 10px; /*增*/
}
.stage .demo {
    width: 200px;
    height: 200px;
    background-color: orangered;
    transform: rotateX(45deg);
}
这就相当于在舞台元素的距离原点（左上）10px，10px的位置往里看，理解这个需要我们一定的空间立体感