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;
}
1 Response