SCSS
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
html {
background: #000;
}
body {
background: #000;
perspective: 2000vw;
overflow: hidden;
transform: scale(0.6);
width: 1300px;
margin: auto;
display: block;
}
$size: 100px;
$semi: $size/2;
.cube-container {
position: relative;
transform-style: preserve-3d;
transform-origin: center center;
transform-origin: 50% 50%;
float: left;
animation: roll 5s linear infinite;
transform: rotateX(-12deg) rotateY(-1deg);
will-change: transform;
margin-bottom: 10px;
@for $i from 0 to 350 {
&:nth-child(#{$i}) {
animation-delay: $i*33+ms
}
}
}
.cube {
position:relative;
width: $size;
height: $size;
transform-style: preserve-3d;
transform-origin: center center;
float: left;
margin-bottom: $semi;
margin-right: $size/2.5;
transform: rotate3d(80, 265, 0.5451, -45deg) rotate(17deg) rotateX(-10deg);
}
.side {
position: absolute;
width: $size;
height: $size;
border: 2px solid #fff;
background: #000;
}
.back {
transform: translateZ(-#{$semi});
}
.left {
transform: translateX(-#{$semi}) rotateY(90deg);
}
.right {
transform: translateX($semi) rotateY(90deg);
}
.top {
transform: translateY(-#{$semi}) rotateX(90deg);
}
.bottom {
transform: translateY($semi) rotateX(90deg);
}
.front {
transform: translateZ($semi);
}
@keyframes roll {
0% {
transform: rotateY(0deg)
}
50% {
transform: rotateY(360deg)
}
100% {
transform: rotateY(360deg)
}
}
