Card by csemszepp

1@keyframes animate {
2  0% {
3    filter: hue-rotate(0deg);
4  }
5  100% {
6    filter: hue-rotate(360deg);
7  }
8}
9
10.container {
11  position: relative;
12  top: -80px;
13  transform: skewY(-20deg);
14  animation: animate 5s linear infinite;
15  .cube {
16    position: relative;
17    z-index: 2;
18    &:nth-child(2) {
19      z-index: 1;
20      translate: -60px -60px;
21    }
22    &:nth-child(3) {
23      z-index: 3;
24      translate: 60px 60px;
25    }
26    div {
27      position: absolute;
28      display: flex;
29      flex-direction: column;
30      gap: 30px;
31      translate: calc(-70px * var(--x)) calc(-60px * var(--y));
32      span {
33        position: relative;
34        display: inline-block;
35        width: 50px;
36        height: 50px;
37        background: #dcdcdc;
38        z-index: calc(1 * var(--i));
39        transition: 1.5s;
40        &:hover {
41          transition: 0s;
42          background: #ef4149;
43          filter: drop-shadow(0 0 30px #ef4149);
44          &:before,
45          &:after {
46            transition: 0s;
47            background: #ef4149;
48          }
49        }
50        &:before {
51          content: "";
52          position: absolute;
53          left: -40px;
54          width: 40px;
55          height: 100%;
56          background: #fff;
57          transform-origin: right;
58          transform: skewY(45deg);
59          transition: 1.5s;
60        }
61        &:after {
62          content: "";
63          position: absolute;
64          top: -40px;
65          left: 0px;
66          width: 100%;
67          height: 40px;
68          background: #f2f2f2;
69          transform-origin: bottom;
70          transform: skewX(45deg);
71          transition: 1.5s;
72        }
73      }
74    }
75  }
76}
77