Skip to content

Commit 49489b1

Browse files
d3p1d3p1
committed
feat: init basic animation [#1]
1 parent 1f3f7cb commit 49489b1

File tree

5 files changed

+219
-111
lines changed

5 files changed

+219
-111
lines changed

‎docs/css/cube.css‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
/**
2+
* @description 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+
--cube-translation: calc(var(--cube-side) + var(--cube-border-size));
13+
}
14+
15+
.scene__cube {
16+
position: absolute;
17+
width: var(--cube-side);
18+
height: var(--cube-side);
19+
}
20+
21+
.scene__cube-side {
22+
position: absolute;
23+
width: var(--cube-side);
24+
height: var(--cube-side);
25+
background: transparent;
26+
border: var(--cube-border-size) solid var(--cube-border-color);
27+
}
28+
29+
.scene__cube-side--front {
30+
transform: rotateY(90deg) translateZ(var(--cube-side-translation));
31+
}
32+
33+
.scene__cube-side--back {
34+
transform: rotateY(-90deg) translateZ(var(--cube-side-translation));
35+
}
36+
37+
.scene__cube-side--left {
38+
transform: rotateX(-90deg) translateZ(var(--cube-side-translation));
39+
}
40+
41+
.scene__cube-side--right {
42+
transform: rotateX(90deg) translateZ(var(--cube-side-translation));
43+
}
44+
45+
.scene__cube-ball {
46+
position: relative;
47+
}
48+
49+
.scene__cube-ball::before,
50+
.scene__cube-ball::after {
51+
content: '';
52+
display: block;
53+
position: absolute;
54+
width: var(--cube-side);
55+
height: var(--cube-side);
56+
border-radius: 50%;
57+
}
58+
59+
.scene__cube-ball::before {
60+
transform: rotateX(90deg) rotateY(-45deg);
61+
}
62+
63+
.scene__cube-ball::after {
64+
transform: rotateX(90deg) rotateY(45deg);
65+
}
66+
67+
.scene__cube:nth-child(even) .scene__cube-ball::before,
68+
.scene__cube:nth-child(even) .scene__cube-ball::after {
69+
background-color: hsl(192, 59%, 53%);
70+
}
71+
72+
.scene__cube:nth-child(odd) .scene__cube-ball::before,
73+
.scene__cube:nth-child(odd) .scene__cube-ball::after {
74+
background-color: hsl(52, 85%, 57%);
75+
}
76+
77+
.scene__cube {
78+
--cube-animation-timing-function: linear(
79+
0 0%,
80+
0.22 2.1%,
81+
0.86 6.5%,
82+
1.11 8.6%,
83+
1.3 10.7%,
84+
1.35 11.8%,
85+
1.37 12.9%,
86+
1.37 13.7%,
87+
1.36 14.5%,
88+
1.32 16.2%,
89+
1.03 21.8%,
90+
0.94 24%,
91+
0.89 25.9%,
92+
0.88 26.85%,
93+
0.87 27.8%,
94+
0.87 29.25%,
95+
0.88 30.7%,
96+
0.91 32.4%,
97+
0.98 36.4%,
98+
1.01 38.3%,
99+
1.04 40.5%,
100+
1.05 42.7%,
101+
1.05 44.1%,
102+
1.04 45.7%,
103+
1 53.3%,
104+
0.99 55.4%,
105+
0.98 57.5%,
106+
0.99 60.7%,
107+
1 68.1%,
108+
1.01 72.2%,
109+
1 86.7%,
110+
1 100%
111+
);
112+
}
113+
114+
.scene__cube--top-front-right {
115+
animation: topFrontRightCubeTranslation 2s
116+
var(--cube-animation-timing-function) infinite;
117+
}
118+
119+
.scene__cube--top-front-left {
120+
transform: translateX(calc(var(--cube-translation) * -1));
121+
animation: topFrontLeftCubeTranslation 2s
122+
var(--cube-animation-timing-function) infinite;
123+
}
124+
125+
.scene__cube--top-back-left {
126+
transform: translateX(calc(var(--cube-translation) * -1))
127+
translateY(calc(var(--cube-translation) * -1));
128+
animation: topBackLeftCubeTranslation 2s var(--cube-animation-timing-function)
129+
infinite;
130+
}
131+
132+
.scene__cube--top-back-right {
133+
transform: translateY(calc(var(--cube-translation) * -1));
134+
animation: topBackRightCubeTranslation 2s
135+
var(--cube-animation-timing-function) infinite;
136+
}
137+
138+
.scene__cube--bottom-front-left {
139+
transform: translateZ(calc(var(--cube-translation) * -1))
140+
translateX(calc(var(--cube-translation) * -1));
141+
}
142+
143+
.scene__cube--bottom-back-left {
144+
transform: translateZ(calc(var(--cube-translation) * -1))
145+
translateX(calc(var(--cube-translation) * -1))
146+
translateY(calc(var(--cube-translation) * -1));
147+
}
148+
149+
.scene__cube--bottom-back-right {
150+
transform: translateZ(calc(var(--cube-translation) * -1))
151+
translateY(calc(var(--cube-translation) * -1));
152+
}
153+
154+
.scene__cube--bottom-front-right {
155+
transform: translateZ(calc(var(--cube-translation) * -1));
156+
}
157+
158+
@keyframes topFrontRightCubeTranslation {
159+
to {
160+
transform: translateX(calc(var(--cube-translation) * -1));
161+
}
162+
}
163+
164+
@keyframes topFrontLeftCubeTranslation {
165+
to {
166+
transform: translateX(calc(var(--cube-translation) * -1))
167+
translateY(calc(var(--cube-translation) * -1));
168+
}
169+
}
170+
171+
@keyframes topBackLeftCubeTranslation {
172+
to {
173+
transform: translateY(calc(var(--cube-translation) * -1));
174+
}
175+
}
176+
177+
@keyframes topBackRightCubeTranslation {
178+
to {
179+
transform: translate(0);
180+
}
181+
}

‎docs/css/styles.css‎

Lines changed: 3 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -2,114 +2,6 @@
22
* @description Styles
33
* @author C. M. de Picciotto <d3p1@d3p1.dev> (https://d3p1.dev/)
44
*/
5-
:root {
6-
--primary: hsl(0, 0%, 20%);
7-
}
8-
9-
body {
10-
background-color: var(--primary);
11-
margin: 0;
12-
overflow: hidden;
13-
}
14-
15-
.scene,
16-
.scene div {
17-
transform-style: preserve-3d;
18-
}
19-
20-
.scene {
21-
display: grid;
22-
place-items: center;
23-
width: 100vw;
24-
height: 100vh;
25-
font-size: 10px;
26-
transform: rotateX(65deg) rotateZ(45deg);
27-
}
28-
29-
.scene__cube {
30-
--cube-side: 10em;
31-
--cube-border-color: hsl(292, 59%, 53%);
32-
--cube-border-size: 0.3em;
33-
--cube-side-translation: calc(
34-
(var(--cube-side) / 2) + var(--cube-border-size)
35-
);
36-
--cube-translation: calc(var(--cube-side) + var(--cube-border-size));
37-
}
38-
39-
.scene__cube {
40-
position: absolute;
41-
width: var(--cube-side);
42-
height: var(--cube-side);
43-
}
44-
45-
.scene__cube-side {
46-
position: absolute;
47-
width: var(--cube-side);
48-
height: var(--cube-side);
49-
background: transparent;
50-
border: var(--cube-border-size) solid var(--cube-border-color);
51-
}
52-
53-
.scene__cube-side--front {
54-
transform: rotateY(90deg) translateZ(var(--cube-side-translation));
55-
}
56-
57-
.scene__cube-side--back {
58-
transform: rotateY(-90deg) translateZ(var(--cube-side-translation));
59-
}
60-
61-
.scene__cube-side--left {
62-
transform: rotateX(-90deg) translateZ(var(--cube-side-translation));
63-
}
64-
65-
.scene__cube-side--right {
66-
transform: rotateX(90deg) translateZ(var(--cube-side-translation));
67-
}
68-
69-
.scene__cube-ball {
70-
width: var(--cube-side);
71-
height: var(--cube-side);
72-
transform: rotateX(90deg) rotateY(-45deg);
73-
border-radius: 50%;
74-
}
75-
76-
.scene__cube:nth-child(even) .scene__cube-ball {
77-
background-color: hsl(192, 59%, 53%);
78-
}
79-
80-
.scene__cube:nth-child(odd) .scene__cube-ball {
81-
background-color: hsl(52, 85%, 57%);
82-
}
83-
84-
.scene__cube--top-front-left {
85-
transform: translateX(calc(var(--cube-translation) * -1));
86-
}
87-
88-
.scene__cube--top-back-left {
89-
transform: translateX(calc(var(--cube-translation) * -1))
90-
translateY(calc(var(--cube-translation) * -1));
91-
}
92-
93-
.scene__cube--top-back-right {
94-
transform: translateY(calc(var(--cube-translation) * -1));
95-
}
96-
97-
.scene__cube--bottom-front-left {
98-
transform: translateZ(calc(var(--cube-translation) * -1))
99-
translateX(calc(var(--cube-translation) * -1));
100-
}
101-
102-
.scene__cube--bottom-back-left {
103-
transform: translateZ(calc(var(--cube-translation) * -1))
104-
translateX(calc(var(--cube-translation) * -1))
105-
translateY(calc(var(--cube-translation) * -1));
106-
}
107-
108-
.scene__cube--bottom-back-right {
109-
transform: translateZ(calc(var(--cube-translation) * -1))
110-
translateY(calc(var(--cube-translation) * -1));
111-
}
112-
113-
.scene__cube--bottom-front-right {
114-
transform: translateZ(calc(var(--cube-translation) * -1));
115-
}
5+
@import url('theme.css');
6+
@import url('utils/3d.css');
7+
@import url('cube.css');

‎docs/css/theme.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
* @description Theme styles
3+
* @author C. M. de Picciotto <d3p1@d3p1.dev> (https://d3p1.dev/)
4+
*/
5+
:root {
6+
--primary: hsl(0, 0%, 20%);
7+
}
8+
9+
body {
10+
background-color: var(--primary);
11+
margin: 0;
12+
overflow: hidden;
13+
}

‎docs/css/utils/3d.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/**
2+
* @description 3D styles
3+
* @author C. M. de Picciotto <d3p1@d3p1.dev> (https://d3p1.dev/)
4+
*/
5+
@import url('3d/scene.css');

‎docs/css/utils/3d/scene.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* @description Scene styles
3+
* @author C. M. de Picciotto <d3p1@d3p1.dev> (https://d3p1.dev/)
4+
*/
5+
.scene,
6+
.scene div {
7+
transform-style: preserve-3d;
8+
}
9+
10+
.scene {
11+
display: grid;
12+
place-items: center;
13+
width: 100vw;
14+
height: 100vh;
15+
font-size: 10px;
16+
transform: rotateX(65deg) rotateZ(45deg);
17+
}

0 commit comments

Comments
 (0)