SCSS
$size: 50px;
$cubeTop: #F6FDF8;
$cubeLeft: #EAEAEA;
$cubeRight: #F05D5E;
$spacing: 50px;
body {
height: 100vh;
padding: 100px;
background: #EECDA3;
background: -webkit-linear-gradient(to left, #EECDA3 , #EF629F);
background: linear-gradient(to left, #EECDA3 , #EF629F);
overflow: hidden;
}
.container {
top: 50%;
left: 50%;
margin-top: $size * -1.5;
margin-left: $size * -1.5;
position: absolute;
width: $size * 3;
height: $size * 3;
transform-style: preserve-3d;
transform: rotateX(45deg) rotateZ(45deg);
}
.cube,
.cube:before,
.cube:after {
width: $size;
height: $size;
position: absolute;
}
.cube {
background-color: $cubeTop;
transform-style: preserve-3d;
transform: translateZ($size);
transition: transform 0.5s cubic-bezier(0.3, 0, 0, 1.4);
&:before {
content: "";
background-color: $cubeLeft;
transform-origin: 100% 100%;
transform: rotateX(-90deg) translateY($size);
}
&:after {
content: "";
transform-origin: 100% 0;
background-color: $cubeRight;
transform: rotateY(90deg) translateX($size);
}
}
.cube:nth-child(1) {
transform: translateX($size * 2) translateY($size * 2);
}
.cube:nth-child(2) {
transform: translateX($size * 1) translateY($size * 2);
}
.cube:nth-child(3) {
transform: translateX($size * 0) translateY($size * 2);
}
.cube:nth-child(4) {
transform: translateX($size * 2) translateY($size * 1);
}
.cube:nth-child(5) {
transform: translateX($size * 1) translateY($size * 1);
}
.cube:nth-child(6) {
transform: translateX($size * 0) translateY($size * 1);
}
.cube:nth-child(7) {
transform: translateX($size * 2) translateY($size * 0);
}
.cube:nth-child(8) {
transform: translateX($size * 1) translateY($size * 0);
}
.cube:nth-child(9) {
transform: translateX($size * 0) translateY($size * 0);
}
.container:hover {
.cube:nth-child(1) {
transform: translateX($size * 2 + $spacing) translateY($size * 2 + $spacing);
}
.cube:nth-child(2) {
transform: translateX($size * 1) translateY($size * 2 + $spacing);
}
.cube:nth-child(3) {
transform: translateX($size * 0 - $spacing) translateY($size * 2 + $spacing);
}
.cube:nth-child(4) {
transform: translateX($size * 2 + $spacing) translateY($size * 1);
}
.cube:nth-child(5) {
transform: translateX($size * 1) translateY($size * 1);
}
.cube:nth-child(6) {
transform: translateX($size * 0 - $spacing) translateY($size * 1);
}
.cube:nth-child(7) {
transform: translateX($size * 2 + $spacing) translateY($size * 0 - $spacing);
}
.cube:nth-child(8) {
transform: translateX($size * 1) translateY($size * 0 - $spacing);
}
.cube:nth-child(9) {
transform: translateX($size * 0 - $spacing) translateY($size * 0 - $spacing);
}
}
