css3-立方体3d旋转动画

1.准备六个面

div做出六个面，在同一个父级容器下
父级容器的transform-style:preserve-3d
六个div设置成绝对定位，重叠在一起

2.父元素做简单的变换

父元素用transform:rotate旋转

3.每个子页面做3D变换

每个子页面则用rotate旋转，和translate平移

4.父元素做动画

代码：
https://github.com/wanghuanweb/wanghuan.github.io/tree/master/css/css3%E5%8A%A8%E7%94%BB%E8%AE%BE%E8%AE%A1/%E7%AB%8B%E6%96%B9%E4%BD%933D%E6%97%8B%E8%BD%AC

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="index.css" rel="stylesheet">
    </head>

    <body>
        <div class="container">
              <div class="box box1">1</div>
              <div class="box box2">2</div>
              <div class="box box3">3</div>
              <div class="box box4">4</div>
              <div class="box box5">5</div>
              <div class="box box6">6</div>
        </div>
    </body>
</html>

*{
    margin: 0px;
    padding: 0px;
}

html,body{
    height: 100%;
    background: black;
}

.container{
    height: 100%;
    position: relative;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;

    -webkit-transform: rotateX(-45deg) rotateY(45deg);
    -moz-transform: rotateX(-45deg) rotateY(45deg);
    -o-transform: rotateX(-45deg) rotateY(45deg);
    transform: rotateX(-45deg) rotateY(45deg);

    -webkit-animation:move 5s infinite;
    -moz-animation:move 5s infinite;
    -o-animation:move 5s infinite;
    animation: move 5s infinite;

}

.box{
    width: 300px;
    height: 300px;
    position: absolute;
    color: white;
    background: white;
    font-weight: bolder;
    font-family: SimHei;
    font-size: 40px;
    text-align: center;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;
    /*加上行高文字便居中了*/
    line-height: 300px;
    border: 1px solid white;
}

.box1{
    -webkit-transform:translateZ(150px);
    -moz-transform:translateZ(150px);
    -o-transform:translateZ(150px);
    transform: translateZ(150px);
    background:rgba(222,134,128,0.5);
}

.box2{
    -webkit-transform:translateX(150px) rotateY(90deg);
    -moz-transform:translateX(150px) rotateY(90deg);
    -o-transform:translateX(150px) rotateY(90deg);
    transform: translateX(150px) rotateY(90deg);
    background: rgba(100,127,255,0.5);
}

.box3{
    -webkit-transform:translateZ(-150px);
    -moz-transform:translateZ(-150px);
    -o-transform:translateZ(-150px);
    transform: translateZ(-150px);
    background: rgba(80,153,204,0.5);
}

.box4{
    -webkit-transform:translateX(-150px) rotateY(90deg);
    -moz-transform:translateX(-150px) rotateY(90deg);
    -o-transform:translateX(-150px) rotateY(90deg);
    transform: translateX(-150px) rotateY(90deg);
    background: rgba(0,204,255,0.5);
}

.box5{
    -webkit-transform:translateY(150px) rotateX(90deg);
    -moz-transform:translateY(150px) rotateX(90deg);
    -o-transform:translateY(150px) rotateX(90deg);
    transform: translateY(150px) rotateX(90deg);
    background: rgba(153,204,255,0.5);
}

.box6{
    -webkit-transform:translateY(-150px) rotateX(90deg);
    -moz-transform:translateY(-150px) rotateX(90deg);
    -o-transform:translateY(-150px) rotateX(90deg);
    transform: translateY(-150px) rotateX(90deg);
    background: rgba(0,255,255,0.5);
}

@-webkit-keyframes move{
    0%{
        -webkit-transform: rotate3d(0deg,0deg,0deg);
    }
    100%{
        -webkit-transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
    }
}

@-moz-keyframes move{
    0%{
        -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100%{
        -moz-transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
    }
}

@-o-keyframes move{
    0%{
        -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100%{
        -o-transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
    }
}

@keyframes move {
    0%{
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100%{
        transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
    }
}