CSS3制作转动立方体（小菜鸟）

    
    
    
body{background: black;}
.wrap{
    height:350px;
    position:relative;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 0px;
     -o-transform-style: preserve-3d;
     -o-perspective: 0px;
     -moz-transform-style: preserve-3d;
     -moz-perspective: 0px;
     transform-style: preserve-3d;
     perspective: 0px;

     -webkit-animation: myanimation 5s ease-in-out 3s infinite;
     -o-animation: myanimation 5s ease-in-out 3s infinite;
     -moz-animation: myanimation 5s ease-in-out 3s infinite;
     -ms-animation: myanimation 5s ease-in-out 3s infinite;
     animation: myanimation 5s ease-in-out 3s infinite;

}
.box{
    width:200px;
    height:200px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-100px;
    line-height:200px;
    font-size:48px;
    text-align: center;
    color:white;

}
.box1{
    -webkit-transform: rotateY(90deg) translateZ(-100px);
    -o-transform: rotateY(90deg) translateZ(-100px);
    -moz-transform: rotateY(90deg) translateZ(-100px);
    transform: rotateY(90deg) translateZ(-100px);
    background-color: rgba(56, 89, 157, 0.5);
}
.box2{
    -webkit-transform: rotateX(90deg) translateZ(100px) ;
    -o-transform: rotateX(90deg) translateZ(100px);
    -moz-transform: rotateX(90deg) translateZ(100px);
    transform: rotateX(90deg) translateZ(100px);
    background-color: rgba(156, 189, 157, 0.5);
}
.box3{
    -webkit-transform: rotateY(90deg) translateZ(100px);
    -o-transform: rotateY(90deg) translateZ(100px);
    -moz-transform: rotateY(90deg) translateZ(100px);
    transform: rotateY(90deg) translateZ(100px);
    background-color: rgba(156, 69, 195, 0.5);
}
.box4{
    -webkit-transform: rotateX(90deg) translateZ(-100px);
    -o-transform: rotateX(90deg) translateZ(-100px);
    -moz-transform: rotateX(90deg) translateZ(-100px);
    transform: rotateX(90deg) translateZ(-100px);
    background-color: rgba(156, 249, 195, 0.5);
}
.box5{
    -webkit-transform: translateZ(-100px);
    -o-transform: translateZ(-100px);
    -moz-transform: translateZ(-100px);
    transform: translateZ(-100px);
    background: #f60;
}
.box6{
    -webkit-transform: translateZ(100px);
    -o-transform: translateZ(100px);
    -moz-transform: translateZ(100px);
    transform: translateZ(100px);
    background-color: rgba(256, 149, 0, 0.5);
}
@-webkit-keyframes myanimation{
    0%{
 -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
 -webkit-transform-origin: center center;
    }
    100%{
 -webkit-transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
 -webkit-transform-origin: center center;
    }
}
@-moz-keyframes myanimation{
    0%{
 -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
 -moz-transform-origin: center center;
    }
    100%{
 -moz-transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
 -moz-transform-origin: center center;
    }
}
@-o-keyframes myanimation{
    0%{
 -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
 -o-transform-origin: center center;
    }
    100%{
 -o-transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
 -o-transform-origin: center center;
    }
}
@-ms-keyframes myanimation{
    0%{
 -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
 -ms-transform-origin: center center;
    }
    100%{
 -ms-transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
 -ms-transform-origin: center center;
    }
}
@keyframes myanimation{
    0%{
 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
 transform-origin: center center;
    }
    100%{
 transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
 transform-origin: center center;
    }
}
    



    
 1
 2
 3
 4
 5
 6