SCSS
$faces : 6;
$face: #555;
$cubes: 36;
$bg: #652aa3;
$p: #bb197e;
$o: #da983c;
body{
perspective: 800px;
perspective-origin: 50% 100px;
position:relative;
height:100vh;
width:100vw;
background:radial-gradient(circle at center, $bg, darken($bg, 20%));
.wrapper{
width:300px;
height:300px;
position:absolute;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%);
animation:rotate 18s ease-in-out infinite;
@keyframes rotate{
0%{
transform:translateX(-50%) translateY(-50%) rotate(0deg);
background:$p;
}
25%{
transform:translateX(-50%) translateY(-50%) rotate(0deg);
}
50%{
transform:translateX(-50%) translateY(-50%) rotate(90deg);
background:$o;
}
75%{
transform:translateX(-50%) translateY(-50%) rotate(90deg);
}
100%{
transform:translateX(-50%) translateY(-50%) rotate(0deg);
background:$p;
}
}
}
.cube {
display:block;
float:left;
position: relative;
width: 50px;
height:50px;
transform-style: preserve-3d;
z-index:2;
animation:twistnshout 6s ease-in-out infinite alternate;
@keyframes twistnshout{
0%{
transform:rotateX(0deg) rotateY(0deg);
}
25%{
transform:rotateX(90deg) rotateY(90deg);
}
75%{
transform:rotateX(90deg) rotateY(90deg);
}
100%{
transform:rotateX(0deg) rotateY(0deg);
}
}
@for $i from 1 through $cubes {
&:nth-child(#{$i}){
animation-delay:#{$i / 10}s;
}
}
div{
position: absolute;
width: 50px;
height: 50px;
@for $i from 1 through $faces {
&:nth-child(#{$i}){
animation:facecolor#{$i} 6s ease-in-out infinite;
@keyframes facecolor#{$i}{
0%{
background:lighten($p, $i * 5);
}
50%{
background:$o;
}
100%{
background:lighten($p, $i * 5);
}
}
}
}
}
.back {
transform: translateZ(-25px) rotateY(180deg);
}
.right {
transform: rotateY(-270deg) translateX(25px);
transform-origin: top right;
}
.left {
transform: rotateY(270deg) translateX(-25px);
transform-origin: center left;
}
.top {
transform: rotateX(-90deg) translateY(-25px);
transform-origin: top center;
}
.bottom {
transform: rotateX(90deg) translateY(25px);
transform-origin: bottom center;
}
.front {
transform: translateZ(25px);
}
}
}
