Loader by htwarriors108
#212121
1.cube { 2 width: 100px; 3 height: 100px; 4 transform-style: preserve-3d; 5 animation: animate 4s linear infinite; 6 cursor: pointer; 7 transition: 0.5s; 8} 9 10.cube:hover { 11 scale: 1.2; 12 animation: animate 3s linear infinite; 13} 14 15.cube__face { 16 position: absolute; 17 width: 100px; 18 height: 100px; 19 display: flex; 20 align-items: center; 21 flex-direction: row; 22 flex-wrap: wrap; 23} 24 25.faceBox { 26 border: calc(100px / 1000) solid rgba(0, 0, 0, 0.8); 27 width: calc(100px / 3); 28 height: calc(100px / 3); 29 opacity: 1; 30} 31 32#cube__face--front span { 33 background-color: #FF4949; 34} 35 36#cube__face--right span { 37 background-color: #13CE66; 38} 39 40#cube__face--left span { 41 background-color: #2D8EFF; 42} 43 44#cube__face--top span { 45 background-color: #FFCC3D; 46} 47 48#cube__face--bottom span { 49 background-color: #fefefe; 50} 51 52#cube__face--back span { 53 background-color: #f1f03e; 54} 55 56#cube__face--front { 57 transform: rotateY(0deg) translateZ(calc(100px / 2)); 58} 59 60#cube__face--right { 61 transform: rotateY(90deg) translateZ(calc(100px / 2)); 62} 63 64#cube__face--back { 65 transform: rotateY(180deg) translateZ(calc(100px / 2)); 66} 67 68#cube__face--left { 69 transform: rotateY(-90deg) translateZ(calc(100px / 2)); 70} 71 72#cube__face--top { 73 transform: rotateX(90deg) translateZ(calc(100px / 2)); 74} 75 76#cube__face--bottom { 77 transform: rotateX(-90deg) translateZ(calc(100px / 2)); 78} 79 80@keyframes animate { 81 0% { 82 transform: rotateX(-30deg) rotateY(0deg) rotateZ(0deg); 83 } 84 85 100% { 86 transform: rotateX(-30deg) rotateY(360deg) rotateZ(360deg); 87 } 88}
1.5K views
1.5K views
MIT License