css3实现正方体动画

< style >

.box{

perspective: 10000px;

transform-style:preserve-3d;

width: 400px;

height: 400px;

margin: 300px auto;

position: relative;

animation: myfirst 8s linear ;

animation-iteration-count:infinite;

}

.box> div{

width: 200px;

height: 200px;

position: absolute;

}

.d1{

transform: translateZ( 100px);

background: red;

}

.d2{

transform: translateZ( -100px);

background: yellow;

}

.d3{

transform: translateX( 100px) rotateY( -90deg);

background: orange;

}

.d4{

transform: translateX( -100px) rotateY( -90deg);

background: blue;

}

.d5{

transform: translateY( -100px) rotateX( 90deg);

background: black;

}

.d6{

background: pink;

transform: translateY( 100px) rotateX( 90deg);

}

@keyframes myfirst{

from { transform: rotateY( 0deg) rotateX( 0deg);}

50% { transform: rotateY( 360deg) rotateX( 30deg);}

to { transform: rotateY( 0deg) rotateX( 0);}

}

< / style >

</ head >

< body >

< div class= "box" >

< div class= "d1" >1 </ div >

< div class= "d2" >2 </ div >

< div class= "d3" >3 </ div >

< div class= "d4" >4 </ div >

< div class= "d5" >5 </ div >

< div class= "d6" >6 </ div >

</ div >

</ body >

< script ></ script >