3D动画

其实是很简单的一个CSS3动画应用，不过一个简单的demo打开了动画的大门，还是很有意思的。

这儿先强烈推荐大神的有关博客，看得小女生很不好意思，虽然是很久以前写的，但是原理和思想还是很值得借鉴的。
http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

先说说transform

这个变形属性，这么理解，当你想让一个平面的东西立体起来，首先思考，一个三维的物体有多少面，比如一个立方体，有前后左右上下六个面，那么准备好六个二维的正方形，这些正方形都是有正反面的，为什么？因为三维世界就是有正反面。所以先将六个二维的正方形正面对着自己，再沿XYZ轴转向为正方体的雏形，再从中心吹一口气，将其膨胀起来，OK，三维的正方体出来了。

这样的原理放在CSS3中如何实现？很简单，只需要利用transform的两种变形操作，rotate旋转、translate移动。

按上面的道理，XYZ上rotate旋转这非常的简单，但是移动这个怎么理解?这就需要我们之前说的三维世界的方向性，正反面是有区别的。从中心吹一口气，也就是在反面推着往前走，用CSS3的语言就是，translateZ，想想立在思维空间里的XYZ轴，Z轴穿过正反面，也就很好理解了。

现在三维空间已经建立起来，接下来就是实现动画。

@keyframes animation

实现动画要结合@keyframes和animation共同完成。
@keyframes关键帧，这个多亏了学摄影的男票，通过他接触了视频摄影这些东西，视频是一帧一帧出来的，动画也同样，一帧又一帧，@keyframes正好定义了从哪一帧到哪一帧，中间又经过了哪些帧，或者说从某一状态到另一状态，就像一幅幅静止的画面，连在一起就构成了视频。

但是有一点我没想明白，这个帧与帧之间的变化是怎么完成的？难道是时间的瞬时性，所以让人毫无察觉吗？但是当前一帧和后一帧之间差别挺大的时候，又如何定义这之间的变换？也许时间会给我dan an

@keyframes完成动画的构成，那么动画应用在哪个元素之上，动画的一些属性比如一次动画的时长，动画的速度，动画什么时候开始，是否有延时，是否要重复，重复的次数，动画的方向（要不要逆向动画）等等，这些用animation动画属性翻译过来就是

animation-duration 
animation-timing-function 
animation-delay 
animation-iteration-count 
animation-direction 

当然存在于这个世界的任何一物都有属于它的代名词，所以动画也有一个名字animation-name
所有这个可以用一个复合属性一次性解决animation
将这些属性应用到某个元素之上，这个元素就会完成@keyframes定义的动画啦，当然要有一个对应，就是使用animation-name
就像这样：

@-webkit-keyframes spin
{
    from
    {
        -webkit-transform: translateZ(-10em) rotateX(0deg) rotateY(0deg);
        tranform: translateZ(-10em) rotateX(0deg) rotateY(0deg);
    }
    to
    {
        -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
        transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);  
    }
}

.cube
{
    /*-webkit-animation-name: spin;
    -webkit-animation-duration: 8s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-direction: alternate;
    -webkit-animation-iteration-count: infinite;*/
    -webkit-animation: spin 6s linear infinite;
    -webkit-transform-style: preserve-3d;
}

这儿有一个transform-style属性，它的定义是：规定如何在3D空间呈现元素。只有两个值：flat | preserve-3d 。 原谅我也不太懂在3D空间如何呈现flat平面，知道的同学，愿闻其详，我也正在学习中。

自此，动画原理结束。

CSS3中的径向渐变

中心思想：渐变方向或角度，渐变起始色，终止色，过渡色
从本质上来说，渐变就是背景属性中的background-image。浏览器会把渐变生成图片，直接使用CSS背景属性来控制他们，就像对待其他图片那样。

老式语法规则：

/*safari 4-5 chrome 1-9*/
-webkit-gradient(type, inner_center,inner_radius, outer_center, outer_radius, from(),to());

语法：

/*safari 5.1+ chrome 10+*/
background-image:-webkit-radial-gradient(position,shape [size],color-stop(),color-stop(),color-stop());

W3C新标准：

background-image:-webkit-radial-gradient(shape at positon,color-stop(),color-stop(),color-stop());

• positon：渐变圆心位置，默认值为center，其值与background-postion类似，用length指定渐变圆心的横坐标与纵坐标

• shape：渐变形状，默认值为circle，两个值：circle ellipse，用size指定渐变结束形状的大小，默认值为farthest-corner，其他值有farthest-side,closet-side,closet-corner

• color-stop()：接受两个参数，第一个参数是指渐变的位置，用小数表示，第二个参数是指该点的颜色。

  • chrome 1-9旧版本，color-stop(位置偏移-小数，停靠颜色值)，将其理解为过渡色，使用时必须

    -webkit-gradient(radial,center center,0,center center,400,from(),to()color-stop(0.9，#0000ff));
    

  • chrome 10+新版本，color-stop(颜色值，位置偏移-百分数)，将其理解为渐变色，包括起始色和终止色、过渡色，使用时

    -webkit-radial-gradient（#430d6d 20%,#0000ff 40%，#000000 100%);
    

for example:

<div></div>
div{
    height:300px;
    width:400px;
    margin:50px,auto;
    border:5px solid hsla(60,50%,80%,.8);
    background-image:-webkit-radial-gradient(#430d6d,#000000);
}

PS：-webkit-gradient();这是括号，作为background的属性值，注意格式；老式语法规则中的start point 中的x y 一个都不能少，因为是定位一个点