Transparent Rotating Cube using CSS

HTML
<div class="wrapper"> <div class="cube"> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> <div class="five"></div> <div class="six"></div> </div> </div>
CSS
body, html { width: 100%; height: 100%; overflow: hidden; background: rgba(255,114,96,1); background: linear-gradient(45deg, rgba(255,114,96,1) 0%, rgba(255,114,96,1) 14%, rgba(252,210,113,1) 54%, rgba(252,210,113,1) 61%, rgba(102,176,102,1) 93%, rgba(96,135,134,1) 100%); } .wrapper { width: 100%; -webkit-perspective: 800; } .cube { position: relative; top: 160px; margin: 0 auto; height: 200px; width: 200px; animation : spin 5s infinite linear; transform-style: preserve-3d; } @keyframes spin { from { transform: rotateY(0) rotateX(0); } to { transform: rotateY(-360deg) rotateX(360deg); } } .cube > div { position: absolute; height: 200px; width: 200px; border: 1px solid #333; opacity: .8; } .cube > div:hover { opacity: 1; transition: opacity .3s linear; } .one { transform: rotateX(90deg) translateZ(100px); background-color: #E3493B; } .two { transform: translateZ(100px); background-color: #23B5AF; } .three { transform: rotateY(90deg) translateZ(100px); background-color: #E8487F; } .four { transform: rotateY(180deg) translateZ(100px); background-color: #28B78D; } .five { transform: rotateY(-90deg) translateZ(100px); background-color: #FF5B00; } .six { transform: rotateX(-90deg) translateZ(100px); background-color: #FEEB51; }
JAVASCRIPT
Expand for more options Login