CSS
* {
margin: 0;
padding: 0;
position: relative;
box-sizing: border-box;
}
html, body {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #25282B;
-webkit-perspective: 10000px;
perspective: 10000px;
}
div {
height: 100px;
width: 100px;
background-color: #C84B4F;
-webkit-transform: rotateX(55deg) rotateZ(45deg);
transform: rotateX(55deg) rotateZ(45deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation: color-cycle 0.5s steps(1, end) infinite;
animation: color-cycle 0.5s steps(1, end) infinite;
}
div:after, div:before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-webkit-transform: translateY(100%) rotateX(-90deg);
transform: translateY(100%) rotateX(-90deg);
-webkit-transform-origin: top;
transform-origin: top;
background-color: #FFCC01;
}
div:before {
background-color: #638DD4;
-webkit-transform: translateY(-100%) rotateX(90deg) rotateY(-90deg);
transform: translateY(-100%) rotateX(90deg) rotateY(-90deg);
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
div:before {
-webkit-animation: color-cycle 0.5s steps(1, end) infinite;
animation: color-cycle 0.5s steps(1, end) infinite;
-webkit-animation-delay: -.2s;
animation-delay: -.2s;
}
div:after {
-webkit-animation: color-cycle 0.5s steps(1, end) infinite;
animation: color-cycle 0.5s steps(1, end) infinite;
-webkit-animation-delay: -.1s;
animation-delay: -.1s;
}
@-webkit-keyframes color-cycle {
0% {
background-color: #c64f51;
}
25% {
background-color: #a881a2;
}
50% {
background-color: #4fb5c6;
}
75% {
background-color: #fcb500;
}
}
@keyframes color-cycle {
0% {
background-color: #c64f51;
}
25% {
background-color: #a881a2;
}
50% {
background-color: #4fb5c6;
}
75% {
background-color: #fcb500;
}
}
