我的世界火把（开关）

01.container input {
02  position: absolute;
03  opacity: 0;
04  cursor: pointer;
05  height: 0;
06  width: 0;
07}
08
09.container {
10  display: flex;
11  flex-direction: column;
12  align-items: center;
13  position: relative;
14  cursor: pointer;
15  user-select: none;
16}
17
18.simple-text {
19  position: absolute;
20  bottom: -40px;
21  width: 120px;
22  text-align: center;
23  color: white;
24  font-size: 16pt;
25  font-weight: 800;
26  font-family: monospace;
27}
28
29.torch {
30  display: flex;
31  justify-content: center;
32  height: 150px;
33}
34
35.head,
36.stick {
37  position: absolute;
38  width: 30px;
39  transform-style: preserve-3d;
40  transform: rotateX(-30deg) rotateY(45deg);
41}
42
43.stick {
44  position: relative;
45  height: 120px;
46}
47
48.face {
49  position: absolute;
50  transform-style: preserve-3d;
51  width: 30px;
52  height: 30px;
53  display: grid;
54  grid-template-columns: 50% 50%;
55  grid-template-rows: 50% 50%;
56  background-color: #000000;
57}
58
59.top {
60  transform: rotateX(90deg) translateZ(15px);
61}
62
63.left {
64  transform: rotateY(-90deg) translateZ(15px);
65}
66
67.right {
68  transform: rotateY(0deg) translateZ(15px);
69}
70
71.top div,
72.left div,
73.right div {
74  width: 102%;
75  height: 102%;
76}
77
78.top div:nth-child(1),
79.left div:nth-child(3),
80.right div:nth-child(3) {
81  background-color: #ffff9760;
82}
83
84.top div:nth-child(2),
85.left div:nth-child(1),
86.right div:nth-child(1) {
87  background-color: #ffd80060;
88}
89
90.top div:nth-child(3),
91.left div:nth-child(4),
92.right div:nth-child(4) {
93  background-color: #ffffff60;
94}
95
96.top div:nth-child(4),
97.left div:nth-child(2),
98.right div:nth-child(2) {
99  background-color: #ff8f0060;
100}
101
102.side {
103  position: absolute;
104  width: 30px;
105  height: 120px;
106  display: grid;
107  grid-template-columns: 50% 50%;
108  grid-template-rows: repeat(8, 12.5%);
109  cursor: pointer;
110  translate: 0 12px;
111}
112
113.side-left {
114  transform: rotateY(-90deg) translateZ(15px) translateY(8px);
115}
116
117.side-right {
118  transform: rotateY(0deg) translateZ(15px) translateY(8px);
119}
120
121.side-left div,
122.side-right div {
123  width: 103%;
124  height: 103%;
125}
126
127.side div:nth-child(1) {
128  background-color: #443622;
129}
130
131.side div:nth-child(2),
132.side div:nth-child(2) {
133  background-color: #2e2517;
134}
135
136.side div:nth-child(3),
137.side div:nth-child(5) {
138  background-color: #4b3b23;
139}
140
141.side div:nth-child(4),
142.side div:nth-child(10) {
143  background-color: #251e12;
144}
145
146.side div:nth-child(6) {
147  background-color: #292115;
148}
149
150.side div:nth-child(7) {
151  background-color: #4b3c26;
152}
153
154.side div:nth-child(8) {
155  background-color: #292115;
156}
157
158.side div:nth-child(9) {
159  background-color: #4b3a21;
160}
161
162.side div:nth-child(11),
163.side div:nth-child(15) {
164  background-color: #3d311d;
165}
166
167.side div:nth-child(12) {
168  background-color: #2c2315;
169}
170
171.side div:nth-child(13) {
172  background-color: #493a22;
173}
174
175.side div:nth-child(14) {
176  background-color: #2b2114;
177}
178
179.side div:nth-child(16) {
180  background-color: #271e10;
181}
182
183.container input:checked ~ .torch .face {
184  filter: drop-shadow(0px 0px 2px rgb(255, 255, 255))
185    drop-shadow(0px 0px 10px rgba(255, 237, 156, 0.7))
186    drop-shadow(0px 0px 25px rgba(255, 227, 101, 0.4));
187}
188
189.container input:checked ~ .torch .top div:nth-child(1),
190.container input:checked ~ .torch .left div:nth-child(3),
191.container input:checked ~ .torch .right div:nth-child(3) {
192  background-color: #ffff97;
193}
194
195.container input:checked ~ .torch .top div:nth-child(2),
196.container input:checked ~ .torch .left div:nth-child(1),
197.container input:checked ~ .torch .right div:nth-child(1) {
198  background-color: #ffd800;
199}
200
201.container input:checked ~ .torch .top div:nth-child(3),
202.container input:checked ~ .torch .left div:nth-child(4),
203.container input:checked ~ .torch .right div:nth-child(4) {
204  background-color: #ffffff;
205}
206
207.container input:checked ~ .torch .top div:nth-child(4),
208.container input:checked ~ .torch .left div:nth-child(2),
209.container input:checked ~ .torch .right div:nth-child(2) {
210  background-color: #ff8f00;
211}
212
213.container input:checked ~ .torch .side div:nth-child(1) {
214  background-color: #7c623e;
215}
216
217.container input:checked ~ .torch .side div:nth-child(2),
218.container input:checked ~ .torch .side div:nth-child(2) {
219  background-color: #4c3d26;
220}
221
222.container input:checked ~ .torch .side div:nth-child(3),
223.container input:checked ~ .torch .side div:nth-child(5) {
224  background-color: #937344;
225}
226
227.container input:checked ~ .torch .side div:nth-child(4),
228.container input:checked ~ .torch .side div:nth-child(10) {
229  background-color: #3c2f1c;
230}
231
232.container input:checked ~ .torch .side div:nth-child(6) {
233  background-color: #423522;
234}
235
236.container input:checked ~ .torch .side div:nth-child(7) {
237  background-color: #9f7f50;
238}
239
240.container input:checked ~ .torch .side div:nth-child(8) {
241  background-color: #403320;
242}
243
244.container input:checked ~ .torch .side div:nth-child(9) {
245  background-color: #977748;
246}
247
248.container input:checked ~ .torch .side div:nth-child(11),
249.container input:checked ~ .torch .side div:nth-child(15) {
250  background-color: #675231;
251}
252
253.container input:checked ~ .torch .side div:nth-child(12) {
254  background-color: #3d301d;
255}
256
257.container input:checked ~ .torch .side div:nth-child(13) {
258  background-color: #987849;
259}
260
261.container input:checked ~ .torch .side div:nth-child(14) {
262  background-color: #3b2e1b;
263}
264
265.container input:checked ~ .torch .side div:nth-child(16) {
266  background-color: #372a17;
267}