SCSS
.c-box {
$box-size: 80px;
$box-color: #F25292;
$box-animation-duration: 2s;
perspective: $box-size * 1000;
width: $box-size;
height: $box-size;
&__inner {
width: $box-size;
height: $box-size;
position:relative;
transform-style: preserve-3d;
transform: rotateX(60deg) rotateZ(-45deg);
&__face {
width: $box-size;
height: $box-size;
position: absolute;
// Top top
&--tt {
background-color: lighten($box-color, 10);
transform: translate3d(0, 0, $box-size / 2);
animation: slide-tt $box-animation-duration infinite ease forwards;
}
// Front left
&--fl {
background-color: $box-color;
transform: translate3d(-($box-size / 2), 0, 0) rotateY(90deg);
animation: slide-fl $box-animation-duration infinite ease forwards;
}
// Front right
&--fr {
background-color: darken($box-color, 10);
transform: translate3d(0, $box-size / 2, 0) rotateX(90deg);
animation: slide-fr $box-animation-duration infinite ease forwards;
}
// Back left
&--bl {
background-color: darken($box-color, 10);
transform: translate3d(0, -($box-size / 2), 0) rotateX(90deg);
animation: slide-bl $box-animation-duration infinite ease forwards;
}
// Back right
&--br {
background-color: $box-color;
transform: translate3d($box-size / 2, 0, 0) rotateY(90deg);
animation: slide-br $box-animation-duration infinite ease forwards;
}
}
}
@keyframes slide-tt {
16%, 80% { transform: translate3d(100%, 0, $box-size / 2); }
100% { transform: translate3d(0, 0, $box-size / 2); }
}
@keyframes slide-fr {
16%, 100% { transform: translate3d(0, $box-size / 2, 0) rotateX(90deg); }
32%, 80% { transform: translate3d(100%, $box-size / 2, 0) rotateX(90deg); }
}
@keyframes slide-bl {
32%, 100% { transform: translate3d(0, -($box-size / 2), 0) rotateX(90deg); }
48%, 80% { transform: translate3d(100%, -($box-size / 2), 0) rotateX(90deg); }
}
@keyframes slide-br {
48%, 100% { transform: translate3d($box-size / 2, 0, 0) rotateY(90deg);}
64%, 80% { transform: translate3d($box-size * 1.5, 0, 0) rotateY(90deg); }
}
@keyframes slide-fl {
64%, 100% { transform: translate3d(-($box-size / 2), 0, 0) rotateY(90deg); }
80% { transform: translate3d($box-size / 2, 0, 0) rotateY(90deg); }
}
}
// Page style
html, body {
height: 100%;
}
.c-container {
display: table;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
perspective: 1000px;
}
1 Response