CSS3 rotating 3D cubes and css33d cubes

CSS3 rotating 3D cubes and css33d cubes

1 <meta charset = "UTF-8"> 2 <style> 3*{4 margin: 0px; 5 padding: 0px; 6} 7 8 @-webkit-keyframes anima {9 0% {10-webkit-transform: rotateX (0deg) rotateY (0deg) rotateZ (0deg ); 11-webkit-transform-origin: center; 12} 13 100% {14-webkit-transform: rotateX (180deg) rotateY (180deg) rotateZ (180deg ); 15-webkit-transform-origin: center; 16} 17} 18 19 # box {20 width: 100px; 21 height: 100px; 22 position: relative; 23 margin: 0px auto; 24 top: 50%; 25-webkit-transform-style: preserve-3d; 26-webkit-perspective: 0px; 27-moz-transform-style: preserve-3d; 28-moz-perspective: 0px; 29-webkit-animation: anima 5S sans infinite; 30-moz-animation: anima 5S sans infinite; 31} 32 33. box {34 width: 100px; 35 height: 100px; 36 line-height: 100px; 37 text-align: center; 38 position: absolute; 39} 40 41. box1 {42-webkit-transform: rotateY (90deg) translateZ (-50px); 43-moz-transform: rotateY (90deg) translateZ (-50px); 44 background-color: rgba (0.8, 0,); 45} 46 47. box2 {48-webkit-transform: rotateY (90deg) translateZ (50px); 49-moz-transform: rotateY (90deg) translateZ (50px); 50 background-color: rgba (0,255, 0, 0.8); 51} 52 53. box3 {54-webkit-transform: rotateX (90deg) translateZ (50px); 55-moz-transform: rotateX (90deg) translateZ (50px); 56 background-color: rgba (255, 0.8,); 57} 58 59. box4 {60-webkit-transform: rotateX (90deg) translateZ (-50px); 61-moz-transform: rotateX (90deg) translateZ (-50px); 62 background-color: rgba (255,255, 0, 0.8); 63} 64 65. box5 {66-webkit-transform: translateZ (-50px); 67-moz-transform: translateZ (-50px); 68 background-color: rgba (255, 0.8 ); 69} 70 71. box6 {72-webkit-transform: translateZ (50px); 73-moz-transform: translateZ (50px); 74 background-color: rgba (0,255,255, 0.8 ); 75} 76 </style> 77 78 <div id = "box"> 79 <ul class = "box box1"> left </ul> 80 <ul class = "box box2 "> right </ul> 81 <ul class =" box box3 "> top </ul> 82 <ul class =" box box4 "> bottom </ul> 83 <ul class = "box box5"> back </ul> 84 <ul class = "box box6"> front </ul> 85 </div>