CSS
body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100vh;
background: #2F2F31;
background-color: #CB3334;
}
.cube {
position: relative;
width: 10vw;
height: 10vw;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
margin: 12.5vw;
-webkit-animation: wobble 5s -5s ease-in-out infinite;
animation: wobble 5s -5s ease-in-out infinite;
}
@-webkit-keyframes wobble {
to {
-webkit-transform: rotateX(360deg) rotateY(360deg);
transform: rotateX(360deg) rotateY(360deg);
}
}
@keyframes wobble {
to {
-webkit-transform: rotateX(360deg) rotateY(360deg);
transform: rotateX(360deg) rotateY(360deg);
}
}
.face,
.text {
position: absolute;
top: 0;
left: 0;
width: 5vw;
height: 5vw;
}
.face:nth-child(1) {
-webkit-transform: translateZ(12.5vw);
transform: translateZ(12.5vw);
}
.face:nth-child(1):after {
background: #dc422f;
}
.face:nth-child(2) {
-webkit-transform: translateZ(-12.5vw);
transform: translateZ(-12.5vw);
}
.face:nth-child(2):after {
background: #3d81f6;
}
.face:nth-child(3) {
-webkit-transform: rotateY(90deg) translateZ(12.5vw);
transform: rotateY(90deg) translateZ(12.5vw);
}
.face:nth-child(3):after {
background: #ff6c00;
}
.face:nth-child(4) {
-webkit-transform: rotateY(90deg) translateZ(-12.5vw);
transform: rotateY(90deg) translateZ(-12.5vw);
}
.face:nth-child(4):after {
background: #fdcc09;
}
.face:nth-child(5) {
-webkit-transform: rotateX(90deg) translateZ(12.5vw);
transform: rotateX(90deg) translateZ(12.5vw);
}
.face:nth-child(5):after {
background: #009d54;
}
.face:nth-child(6) {
-webkit-transform: rotateX(90deg) translateZ(-12.5vw);
transform: rotateX(90deg) translateZ(-12.5vw);
}
.face:nth-child(6):after {
background: white;
}
.face {
box-shadow: inset 0 0 0 2px black;
}
.face:after {
display: block;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
::-webkit-scrollbar{width: 8px;}::-webkit-scrollbar-track{background: #000;}::-webkit-scrollbar-thumb{background: #000;}::-webkit-scrollbar-thumb:hover{background: #fff;}
