css3动画基础知识 及 旋转的正方体实现。

css3的几种动画：

1.过渡动画 transition

过渡动画过渡的是操作的元素属性

可写在一块，如transition：all 0.5s easy-in-out 0.5s;

也可分开写：

 transition-delay: 0.5s;过渡的时间延迟

 transition-duration: 0.2s;过渡的时间

 transition-property: all;过渡的属性

  transition-timing-function: linear;  过渡的方式

2.transform动画

    transform:平移值：translate(100px) 可以分为三种x,y,z 默认向右移动

    旋转值：rotate(45deg) 分为x,y,z 默认z轴

    伸缩动画scale: 一个值的时候等距伸缩 两个值的时候代表宽高比例

    skew:斜动画

3.animation帧动画：需要先用@keyframes定义动画，然后在加给需要此动画的div。

animation: animateInfo 5s linear infinite;

animateInfo为动画的名字，5s为动画的持续时间，linear为动画将匀速完成一个周期，infinite为动画的播放次数为循环

比如我们用animation写一个旋转的正方体：

html代码：

<div class="center">
    <div class="z_1 mian"></div>
    <div class="z_2 mian"></div>
    <div class="z_3 mian"></div>
    <div class="z_4 mian"></div>
    <div class="z_5 mian"></div>
    <div class="z_6 mian"></div>
</div>

正方体有六个面，前后，上下，左右

先将这六个面全部绝对定位，其父容器相对定位。

.center{
            width: 400px;
            height: 400px;
            margin: 100px auto;
            border: 1px solid white;
            position: relative;}

.mian{
            position: absolute;
            width: 400px;
            height: 400px;
            border-radius: 20%;
            opacity: 0.7;
        }

前后两面只需分别沿着z轴平移200px 和 -200px；

上下两面需要先将其绕x轴旋转90度，然后分别沿着z轴平移200px 和 -200px，那么为什么要沿z轴而不是y轴呢，因为在旋转的同时，坐标系也发生了变化。

同理左右两面先将其绕y轴旋转90度，然后分别沿着z轴平移200px 和 -200px。

这样正方体就得到了。

        .z_1{
            background-color: white;
            transform: translatez(200px);
        }
        .z_2{
            background-color: red;
            transform: translatez(-200px);
        }
        .z_3{
            background-color: orange;
            transform: rotatey(90deg) translatez(200px);
        }
        .z_4{
            background-color: yellow;
            transform: rotatey(90deg) translatez(-200px);
        }
        .z_5{
            background-color: green;
            transform: rotatex(90deg) translatez(200px);
        }
        .z_6{
            background-color: blue;
            transform: rotatex(90deg) translatez(-200px);
        }

然后来写动画。让其绕y轴和x轴从0度分别旋转到360度。

 @keyframes animateInfo {
            from{
                transform: rotatey(0deg) rotatex(0deg);
            }
            to{
                transform: rotatey(360deg) rotatex(360deg);
            }
        }

加给父容器，同时父容器需要转为3d。

.center{
            width: 400px;
            height: 400px;
            margin: 100px auto;
            border: 1px solid white;
            position: relative;
            transform-style: preserve-3d;
            animation: animateInfo 5s linear infinite;
        }

给正方体六个面设置弧角，透明度，以及不同的颜色，这些可以清楚的观察。

整体css3代码：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            width: 100%;
            height: 100%;
            background-color: black;
        }
        .center{
            width: 400px;
            height: 400px;
            margin: 100px auto;
            border: 1px solid white;
            position: relative;
            transform-style: preserve-3d;
            animation: animateInfo 5s linear infinite;
        }
        @keyframes animateInfo {
            from{
                transform: rotatey(0deg) rotatex(0deg);
            }
            to{
                transform: rotatey(360deg) rotatex(360deg);
            }
        }
        .mian{
            position: absolute;
            width: 400px;
            height: 400px;
            border-radius: 20%;
            opacity: 0.7;

        }
        .z_1{
            background-color: white;
            transform: translatez(200px);
        }
        .z_2{
            background-color: red;
            transform: translatez(-200px);
        }
        .z_3{
            background-color: orange;
            transform: rotatey(90deg) translatez(200px);
        }
        .z_4{
            background-color: yellow;
            transform: rotatey(90deg) translatez(-200px);
        }
        .z_5{
            background-color: green;
            transform: rotatex(90deg) translatez(200px);
        }
        .z_6{
            background-color: blue;
            transform: rotatex(90deg) translatez(-200px);
        }
    </style>