Skip to content

Commit e7ae095

Browse files
d3p1d3p1
committed
feat: improve cube animation [#2]
1 parent e26574c commit e7ae095

File tree

6 files changed

+259
-182
lines changed

6 files changed

+259
-182
lines changed

‎docs/css/box.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
/**
2+
* @description Box styles
3+
* @author C. M. de Picciotto <d3p1@d3p1.dev> (https://d3p1.dev/)
4+
*/
5+
@import url('box/cube.css');
6+
@import url('box/ball.css');
7+
@import url('box/animation.css');
8+
9+
.scene__cube {
10+
transform-origin: 0 0 calc((var(--cube-side) + var(--cube-border-size)) / -2);
11+
}
12+
13+
.scene__cube--top-front-right .scene__cube-ball {
14+
transform: rotateY(90deg) rotateX(-45deg);
15+
}
16+
17+
.scene__cube--top-front-left {
18+
transform: rotateZ(90deg);
19+
}
20+
21+
.scene__cube--top-front-left .scene__cube-ball {
22+
transform: rotateY(90deg) rotateX(45deg);
23+
}
24+
25+
.scene__cube--top-back-left {
26+
transform: rotateZ(180deg);
27+
}
28+
29+
.scene__cube--top-back-left .scene__cube-ball {
30+
transform: rotateY(90deg) rotateX(135deg);
31+
}
32+
33+
.scene__cube--top-back-right {
34+
transform: rotateZ(270deg);
35+
}
36+
37+
.scene__cube--top-back-right .scene__cube-ball {
38+
transform: rotateY(90deg) rotateX(225deg);
39+
}
40+
41+
.scene__cube--bottom-front-left {
42+
transform: rotateZ(90deg) rotateY(90deg);
43+
}
44+
45+
.scene__cube--bottom-front-left .scene__cube-ball {
46+
transform: rotateX(45deg);
47+
}
48+
49+
.scene__cube--bottom-back-left {
50+
transform: rotateZ(90deg) rotateY(180deg);
51+
}
52+
53+
.scene__cube--bottom-back-left .scene__cube-ball {
54+
transform: rotateY(90deg) rotateX(-45deg);
55+
}
56+
57+
.scene__cube--bottom-back-right {
58+
transform: rotateX(-180deg);
59+
}
60+
61+
.scene__cube--bottom-back-right .scene__cube-ball {
62+
transform: rotateY(90deg) rotateX(45deg);
63+
}
64+
65+
.scene__cube--bottom-front-right {
66+
transform: rotateX(-90deg);
67+
}
68+
69+
.scene__cube--bottom-front-right .scene__cube-ball {
70+
transform: rotateY(45deg);
71+
}

‎docs/css/box/animation.css‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
/**
2+
* @description Box animation styles
3+
* @author C. M. de Picciotto <d3p1@d3p1.dev> (https://d3p1.dev/)
4+
*/
5+
.scene__cube {
6+
--cube-animation-timing-function: linear(
7+
0 0%,
8+
0.22 2.1%,
9+
0.86 6.5%,
10+
1.11 8.6%,
11+
1.3 10.7%,
12+
1.35 11.8%,
13+
1.37 12.9%,
14+
1.37 13.7%,
15+
1.36 14.5%,
16+
1.32 16.2%,
17+
1.03 21.8%,
18+
0.94 24%,
19+
0.89 25.9%,
20+
0.88 26.85%,
21+
0.87 27.8%,
22+
0.87 29.25%,
23+
0.88 30.7%,
24+
0.91 32.4%,
25+
0.98 36.4%,
26+
1.01 38.3%,
27+
1.04 40.5%,
28+
1.05 42.7%,
29+
1.05 44.1%,
30+
1.04 45.7%,
31+
1 53.3%,
32+
0.99 55.4%,
33+
0.98 57.5%,
34+
0.99 60.7%,
35+
1 68.1%,
36+
1.01 72.2%,
37+
1 86.7%,
38+
1 100%
39+
);
40+
}
41+
42+
.scene__cube--top-front-right {
43+
animation: topFrontRightCubeHorizontalRotation 5s
44+
var(--cube-animation-timing-function) infinite;
45+
}
46+
47+
.scene__cube--top-front-right .scene__cube-ball {
48+
animation: topFrontRightCubeBallHorizontalRotation 5s
49+
var(--cube-animation-timing-function) infinite;
50+
}
51+
52+
.scene__cube--top-front-left {
53+
animation: topFrontLeftCubeHorizontalRotation 5s
54+
var(--cube-animation-timing-function) infinite;
55+
}
56+
57+
.scene__cube--top-front-left .scene__cube-ball {
58+
animation: topFrontLeftCubeBallHorizontalRotation 5s
59+
var(--cube-animation-timing-function) infinite;
60+
}
61+
62+
.scene__cube--top-back-left {
63+
animation: topBackLeftCubeHorizontalRotation 5s
64+
var(--cube-animation-timing-function) infinite;
65+
}
66+
67+
.scene__cube--top-back-left .scene__cube-ball {
68+
animation: topBackLeftCubeBallHorizontalRotation 5s
69+
var(--cube-animation-timing-function) infinite;
70+
}
71+
72+
.scene__cube--top-back-right {
73+
animation: topBackRightCubeHorizontalRotation 5s
74+
var(--cube-animation-timing-function) infinite;
75+
}
76+
77+
.scene__cube--top-back-right .scene__cube-ball {
78+
animation: topBackRightCubeBallHorizontalRotation 5s
79+
var(--cube-animation-timing-function) infinite;
80+
}
81+
82+
@keyframes topFrontRightCubeHorizontalRotation {
83+
to {
84+
transform: rotateZ(360deg);
85+
}
86+
}
87+
88+
@keyframes topFrontRightCubeBallHorizontalRotation {
89+
to {
90+
transform: rotateY(90deg) rotateX(325deg);
91+
}
92+
}
93+
94+
@keyframes topFrontLeftCubeHorizontalRotation {
95+
to {
96+
transform: rotateZ(450deg);
97+
}
98+
}
99+
100+
@keyframes topFrontLeftCubeBallHorizontalRotation {
101+
to {
102+
transform: rotateY(90deg) rotateX(405deg);
103+
}
104+
}
105+
106+
@keyframes topBackLeftCubeHorizontalRotation {
107+
to {
108+
transform: rotateZ(540deg);
109+
}
110+
}
111+
112+
@keyframes topBackLeftCubeBallHorizontalRotation {
113+
to {
114+
transform: rotateY(90deg) rotateX(495deg);
115+
}
116+
}
117+
118+
@keyframes topBackRightCubeHorizontalRotation {
119+
to {
120+
transform: rotateZ(630deg);
121+
}
122+
}
123+
124+
@keyframes topBackRightCubeBallHorizontalRotation {
125+
to {
126+
transform: rotateY(90deg) rotateX(585deg);
127+
}
128+
}

‎docs/css/box/ball.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* @description Box ball styles
3+
* @author C. M. de Picciotto <d3p1@d3p1.dev> (https://d3p1.dev/)
4+
*/
5+
.scene__cube-ball {
6+
width: var(--cube-side);
7+
height: var(--cube-side);
8+
border-radius: 50%;
9+
}
10+
11+
.scene__cube:nth-child(even) .scene__cube-ball {
12+
background-color: hsl(192, 59%, 53%);
13+
}
14+
15+
.scene__cube:nth-child(odd) .scene__cube-ball {
16+
background-color: hsl(52, 85%, 57%);
17+
}

‎docs/css/box/cube.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/**
2+
* @description Box cube styles
3+
* @author C. M. de Picciotto <d3p1@d3p1.dev> (https://d3p1.dev/)
4+
*/
5+
.scene__cube {
6+
--cube-side: 10em;
7+
--cube-border-color: hsl(292, 59%, 53%);
8+
--cube-border-size: 0.3em;
9+
--cube-side-translation: calc(
10+
(var(--cube-side) / 2) + var(--cube-border-size)
11+
);
12+
}
13+
14+
.scene__cube {
15+
position: absolute;
16+
width: var(--cube-side);
17+
height: var(--cube-side);
18+
}
19+
20+
.scene__cube-side {
21+
position: absolute;
22+
width: var(--cube-side);
23+
height: var(--cube-side);
24+
background: transparent;
25+
border: var(--cube-border-size) solid var(--cube-border-color);
26+
}
27+
28+
.scene__cube-side--front {
29+
transform: rotateY(90deg) translateZ(var(--cube-side-translation));
30+
}
31+
32+
.scene__cube-side--back {
33+
transform: rotateY(-90deg) translateZ(var(--cube-side-translation));
34+
}
35+
36+
.scene__cube-side--left {
37+
transform: rotateX(-90deg) translateZ(var(--cube-side-translation));
38+
}
39+
40+
.scene__cube-side--right {
41+
transform: rotateX(90deg) translateZ(var(--cube-side-translation));
42+
}

0 commit comments

Comments
 (0)