Loader by Bodyhc
#01b4f9
1.wrapper { 2 perspective: 1000px; 3} 4.cube { 5 position: relative; 6 width: 200px; 7 height: 200px; 8 transform-style: preserve-3d; 9 animation: animate 4s linear infinite; 10} 11.side { 12 position: absolute; 13 width: 200px; 14 height: 200px; 15 display: grid; 16 background-color: #01b4f9; 17 border-radius: 10px; 18 place-content: center; 19 border: 3px solid #fff; 20} 21 22.front { 23 transform: translateZ(100px); 24} 25.back { 26 transform: rotateY(180deg) translateZ(100px); 27} 28.top { 29 transform: rotateX(90deg) translateZ(100px); 30} 31.bottom { 32 transform: rotateX(-90deg) translateZ(100px); 33} 34.left { 35 transform: rotateY(-90deg) translateZ(100px); 36} 37.right { 38 transform: rotateY(90deg) translateZ(100px); 39} 40 41@keyframes animate { 42 0% { 43 transform: rotateX(0deg) rotateY(0deg); 44 } 45 100% { 46 transform: rotateX(360deg) rotateY(360deg); 47 } 48} 49
170 views
170 views
MIT License