1.container {
2  width: 100%;
3  display: flex;
4  justify-content: center;
5  align-items: center;
6}
7
8.tree {
9  position: relative;
10  width: 50px;
11  height: 50px;
12  transform-style: preserve-3d;
13  transform: rotateX(-20deg) rotateY(30deg);
14  animation: treeAnimate 5s linear infinite;
15}
16
17@keyframes treeAnimate {
18  0% {
19    transform: rotateX(-20deg) rotateY(360deg);
20  }
21
22  100% {
23    transform: rotateX(-20deg) rotateY(0deg);
24  }
25}
26
27.tree div {
28  position: absolute;
29  top: -50px;
30  left: 0;
31  width: 100%;
32  height: 100%;
33  transform-style: preserve-3d;
34  transform: translateY(calc(25px * var(--x))) translateZ(0px);
35}
36
37.tree div.branch span {
38  position: absolute;
39  top: 0;
40  left: 0;
41  width: 100%;
42  height: 100%;
43  background: linear-gradient(90deg, #69c069, #77dd77);
44  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
45  border-bottom: 5px solid #00000019;
46  transform-origin: bottom;
47  transform: rotateY(calc(90deg * var(--i))) rotateX(30deg) translateZ(28.5px);
48}
49
50.tree div.stem span {
51  position: absolute;
52  top: 110px;
53 /* updated top value */
54  left: calc(50% - 7.5px);
55  width: 15px;
56  height: 50%;
57  background: linear-gradient(90deg, #bb4622, #df7214);
58  border-bottom: 5px solid #00000019;
59  transform-origin: bottom;
60  transform: rotateY(calc(90deg * var(--i))) translateZ(7.5px);
61}
62
63.shadow {
64  position: absolute;
65  top: 0;
66  left: 0;
67  width: 100%;
68  height: 100%;
69  background: rgba(0, 0, 0, 0.4);
70  filter: blur(20px);
71  transform-style: preserve-3d;
72  transform: rotateX(90deg) translateZ(-65px);
73}
74