CSS
html, body {
height: 100%;
}
body {
font-size: 200px;
background: #e4e4e4;
overflow: hidden;
}
.container, .container * {
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
}
.container { width: 0; height: 0; }
@keyframes wrapper1 {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}
.wrapper1 {
animation: wrapper1 3s linear infinite;
}
.wrapper2 {
transform: rotateY(0deg);
transition: all .5s;
}
.container:hover .wrapper2 {
transform: rotateY(5deg);
}
@keyframes cube {
from { transform: rotate(0) rotateX(-35deg) rotateY(-45deg); }
to { transform: rotate(-360deg) rotateX(-35deg) rotateY(-45deg); }
}
.cube {
width: 0;
height: 0;
transform: rotateX(-35deg) rotateY(-45deg);
animation: cube 3s linear infinite;
}
.cube .face {
width: 1em;
height: 1em;
margin: -.5em 0 0 -.5em;
background:
linear-gradient(to right, currentColor 20%, transparent 20%),
linear-gradient(to right, transparent 40%, currentColor 40%, currentColor 60%, transparent 60%),
linear-gradient(to right, transparent 80%, currentColor 80%),
linear-gradient(to top, currentColor 20%, transparent 20%),
linear-gradient(to top, transparent 40%, currentColor 40%, currentColor 60%, transparent 60%);
background-repeat: no-repeat;
background-position: top left, top left, top left, bottom right, bottom right;
background-size: 100% 100%, 100% 60%, 100% 20%, 100% 100%, 60% 100%;
}
.cube .face:nth-child(n + 4) { background: currentColor; }
.cube .face:nth-child(1) { transform: translateZ(.5em); }
.cube .face:nth-child(2) { transform: rotateY(90deg) translateZ(.5em) rotate(-90deg); }
.cube .face:nth-child(3) { transform: rotateX(90deg) translateZ(.5em) rotate(90deg); }
.cube .face:nth-child(4) { transform: rotateY(-90deg) translateZ(.5em) rotate(180deg); }
.cube .face:nth-child(5) { transform: rotateX(-90deg) translateZ(.5em) rotate(180deg); }
.cube .face:nth-child(6) { transform: rotateY(180deg) translateZ(.5em) rotate(90deg); }
/* Colors */
.cube .face:nth-child(1) { color: #383838; }
.cube .face:nth-child(2) { color: #999999; }
.cube .face:nth-child(3) { color: #c9c9c9; }
.cube .face:nth-child(4) { color: #858585; }
.cube .face:nth-child(5) { color: #c1c1c1; }
.cube .face:nth-child(6) { color: #606060; }
