<div class="wrapepr">
  <div id="cube" class="animate">
    <div class="3d-effect">1</div>
    <div class="3d-effect">2</div>
    <div class="3d-effect">3</div>
    <div class="3d-effect">4</div>
    <div class="3d-effect">5</div>
    <div class="3d-effect">6</div>
  </div>
</div>
body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.5; background-color:#545454;}
div { box-sizing: border-box; -o-box-sizing: border-box; -icab-box-sizing: border-box; -khtml-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
#cube div { border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; -ms-border-radius:50%; }
.wrapepr { width:300px; margin:150px auto; }
@-moz-keyframes spinningH {  
 	from { -moz-transform: rotateX(0deg) rotateY(0deg);}
    to { -moz-transform: rotateX(360deg) rotateY(360deg);}
}
@-webkit-keyframes spinningH {  
	from {-webkit-transform: rotateX(0deg) rotateY(0deg);}
	to { -webkit-transform: rotateX(360deg) rotateY(360deg);}
}
@-o-keyframes spinningH {  
	from { -o-transform: rotateX(0deg) rotateY(0deg);}
	to { -o-transform: rotateX(360deg) rotateY(360deg);}
}
@-ms-keyframes spinningH {  
	from { -ms-transform: rotateX(0deg) rotateY(0deg);}
	to { -ms-transform: rotateX(360deg) rotateY(360deg);}
}
@keyframes spinningH {
	from {transform: rotateX(0deg) rotateY(0deg);}
	to { transform: rotateX(360deg) rotateY(360deg);}
}
.animate { -webkit-animation:spinningH 6s infinite linear; -moz-animation:spinningH 6s infinite linear; -o-animation:spinningH 6s infinite linear; -ms-animation:spinningH 6s infinite linear; animation:spinningH 6s infinite linear; color:#fff; font-size:20px; line-height:80px; text-align:center;}
#cube { position:relative; margin:0 auto; height:80px; width:80px; -webkit-transition:-webkit-transform 2s linear; -moz-transition:-moz-transform 2s linear; -o-transition:-o-transform 2s linear; -ms-transition:-ms-transform 2s linear; transition:transform 2s linear; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -o-transform-style:preserve-3d; -ms-transform-style:preserve-3d; transform-style:preserve-3d;}
#cube>div { position:absolute; height: 120px; width: 120px; padding: 20px; opacity: 1; background-position: center;}
#cube div:nth-child(1) { -webkit-transform:translateZ(60px); -moz-transform:translateZ(60px); -o-transform:translateZ(60px); -ms-transform:translateZ(60px); transform:translateZ(60px); background-color:rgba(255,204,0,0.5); border:1px solid #ccc; box-shadow:inset 0 0 20px rgba(0,0,0,.2);}
#cube div:nth-child(2) {-webkit-transform:rotateY(90deg) translateZ(60px); -moz-transform:rotateY(90deg) translateZ(60px); -o-transform:rotateY(90deg) translateZ(60px); -ms-transform : rotateY(90deg) translateZ(60px); transform : rotateY(90deg) translateZ(60px); background-color: rgba(164,0,162,0.5); border: 1px solid #ccc; box-shadow: inset 0 0 20px rgba(0,0,0,.2); }
#cube div:nth-child(3) { -webkit-transform : rotateY(180deg) translateZ(60px); -moz-transform : rotateY(180deg) translateZ(60px); -o-transform : rotateY(180deg) translateZ(60px); -ms-transform : rotateY(180deg) translateZ(60px); transform : rotateY(180deg) translateZ(60px); background-color: rgba(0,54,135,0.5); border: 1px solid #ccc; box-shadow: inset 0 0 20px rgba(0,0,0,.2); }
#cube div:nth-child(4) { -webkit-transform : rotateY(-90deg) translateZ(60px); -moz-transform : rotateY(-90deg) translateZ(60px); -o-transform : rotateY(-90deg) translateZ(60px); -ms-transform : rotateY(-90deg) translateZ(60px); transform : rotateY(-90deg) translateZ(60px); background-color: rgba(0,0,0,0.5); border: 1px solid #ccc; box-shadow: inset 0 0 20px rgba(0,0,0,.2); }
#cube div:nth-child(5) { -webkit-transform : rotateX(-90deg) translateZ(60px) rotate(180deg); -moz-transform : rotateX(-90deg) translateZ(60px) rotate(180deg); -o-transform : rotateX(-90deg) translateZ(60px) rotate(180deg); -ms-transform : rotateX(-90deg) translateZ(60px) rotate(180deg); transform : rotateX(-90deg) translateZ(60px) rotate(180deg); background-color: rgba(61,201,0,0.5); border: 1px solid #ccc; box-shadow: inset 0 0 20px rgba(0,0,0,.2); }
#cube div:nth-child(6) { -webkit-transform : rotateX(90deg) translateZ(60px); -moz-transform : rotateX(90deg) translateZ(60px); -o-transform : rotateX(90deg) translateZ(60px); -ms-transform : rotateX(90deg) translateZ(60px); transform : rotateX(90deg) translateZ(60px); background-color: rgba(255,48,0,0.5); border: 1px solid #ccc; box-shadow: inset 0 0 20px rgba(0,0,0,.2); text-align: center; }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.