Loader by ChaudaryHammad
#e8e8e8
1.loader { 2 perspective: 800px; 3} 4 5.cube { 6 width: 40px; 7 height: 40px; 8 position: relative; 9 transform-style: preserve-3d; 10 animation: spin 3s linear infinite; 11} 12 13.face { 14 width: 40px; 15 height: 40px; 16 position: absolute; 17 opacity: 0.8; 18} 19 20.front { 21 transform: translateZ(20px); 22 background-color: #3498db; 23} 24 25.back { 26 transform: translateZ(-20px); 27 background-color: #e74c3c; 28} 29 30.left { 31 transform: rotateY(90deg) translateZ(20px); 32 background-color: #2ecc71; 33} 34 35.right { 36 transform: rotateY(-90deg) translateZ(20px); 37 background-color: #f39c12; 38} 39 40.top { 41 transform: rotateX(90deg) translateZ(20px); 42 background-color: #9b59b6; 43} 44 45.bottom { 46 transform: rotateX(-90deg) translateZ(20px); 47 background-color: #e67e22; 48} 49 50@keyframes spin { 51 0% { 52 transform: rotateX(0) rotateY(0) rotateZ(0); 53 } 54 55 100% { 56 transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); 57 } 58} 59
295 views
295 views
MIT License