1.3K views
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
MIT License