#212121
1.spinner { 2 width: 70.4px; 3 height: 70.4px; 4 --clr: rgb(247, 197, 159); 5 --clr-alpha: rgb(247, 197, 159,.1); 6 animation: spinner 1.6s infinite ease; 7 transform-style: preserve-3d; 8} 9 10.spinner > div { 11 background-color: var(--clr-alpha); 12 height: 100%; 13 position: absolute; 14 width: 100%; 15 border: 3.5px solid var(--clr); 16} 17 18.spinner div:nth-of-type(1) { 19 transform: translateZ(-35.2px) rotateY(180deg); 20} 21 22.spinner div:nth-of-type(2) { 23 transform: rotateY(-270deg) translateX(50%); 24 transform-origin: top right; 25} 26 27.spinner div:nth-of-type(3) { 28 transform: rotateY(270deg) translateX(-50%); 29 transform-origin: center left; 30} 31 32.spinner div:nth-of-type(4) { 33 transform: rotateX(90deg) translateY(-50%); 34 transform-origin: top center; 35} 36 37.spinner div:nth-of-type(5) { 38 transform: rotateX(-90deg) translateY(50%); 39 transform-origin: bottom center; 40} 41 42.spinner div:nth-of-type(6) { 43 transform: translateZ(35.2px); 44} 45 46@keyframes spinner { 47 0% { 48 transform: rotate(45deg) rotateX(-25deg) rotateY(25deg); 49 } 50 51 50% { 52 transform: rotate(45deg) rotateX(-385deg) rotateY(25deg); 53 } 54 55 100% { 56 transform: rotate(45deg) rotateX(-385deg) rotateY(385deg); 57 } 58}
Comments
Variations
1 MIT License