Card by KhaledMatalkah
#212121
1.cube-container { 2 width: 200px; 3 height: 200px; 4 perspective: 800px; 5 margin: 50px auto; 6} 7 8.cube { 9 position: relative; 10 width: 100%; 11 height: 100%; 12 transform-style: preserve-3d; 13 animation: rotate 8s infinite linear; 14} 15 16.face { 17 position: absolute; 18 width: 200px; 19 height: 200px; 20 color: rgb(214, 21, 21); 21 font-size: 18px; 22 text-align: center; 23 line-height: 200px; 24 background: transparent; 25 opacity: 0.9; 26 border: 2px solid; 27 border-image: linear-gradient(to right, #ff6b6b, #355c7d, #557d35, #cfcf16, #a51f1f) 1; 28 box-shadow: 0 0 100px rgba(245, 8, 8, 0.8); 29} 30 31.front { 32 transform: translateZ(100px); 33} 34 35.back { 36 transform: rotateY(180deg) translateZ(100px); 37} 38 39.right { 40 transform: rotateY(90deg) translateZ(100px); 41} 42 43.left { 44 transform: rotateY(-90deg) translateZ(100px); 45} 46 47.top { 48 transform: rotateX(90deg) translateZ(100px); 49} 50 51.bottom { 52 transform: rotateX(-90deg) translateZ(100px); 53} 54 55.cube-container:hover .cube { 56 animation-play-state: paused; 57} 58 59@keyframes rotate { 60 0% { 61 transform: rotateX(0) rotateY(0) rotateZ(0); 62 } 63 64 100% { 65 transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); 66 } 67} 68
2.7K views
2.7K views
Variations
1 MIT License