利用CSS3制作旋转3D立方体

直接上代码

<div class="main1">
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3"></div>
    <div class="a4"></div>
    <div class="a5"></div>
    <div class="a6"></div>

    </div>



.main1 {
    width:200px;
    height:200px;
    position:relative;
    margin:30px auto;
    animation:move 10s infinite;
    transform-style:preserve-3d
}
.main1 div {
    width:200px;
    height:200px;
    opacity:0.5;
    position:absolute;
    left:0px;
    top:0px;
}
.a1 {
    background:blue;
}
.a2 {
    background:yellow;
}
.a3 {
    background:green;
}
.a4 {
    background:orangered;
}
.a5 {
    background:pink;
}
.a6 {
    background:black;
}
.a1 {
    transform:translateZ(100px);
}
.a2 {
    transform:translateZ(-100px);
}
.a3 {
    transform:rotateY(-90deg) translateZ(100px);
}
.a4 {
    transform:rotateY(90deg) translateZ(100px);
}
.a5 {
    transform:rotateX(90deg) translateZ(100px);
}
.a6 {
    transform:rotateX(-90deg) translateZ(100px);
}
@keyframes move {
    from {
    transfrom:rotateY(0deg) rotateX(0deg);
}
to {
    transform:rotateY(720deg) rotateX(360deg);
}