#212121
1.cube { 2 top: -100px; 3 margin: 200px auto 0; 4 width: 100px; 5 height: 100Px; 6 position: relative; 7 transform-style: preserve-3d; 8 animation: spin 3s infinite cubic-bezier(0.16, 0.61, 0.49, 0.91); 9} 10 11.face { 12 position: absolute; 13 width: 100%; 14 height: 100%; 15 background: rgb(67, 191, 207); 16 border: 2px solid #fff; 17 border-radius: 5px; 18 box-shadow: 0 0 15px #fff; 19} 20 21.top { 22 transform: rotateX(90deg) translateZ(50px); 23 animation: shift-top 3s infinite ease-out; 24} 25 26.bottom { 27 transform: rotateX(-90deg) translateZ(50px); 28 animation: shift-bottom 3s infinite ease-out; 29} 30 31.right { 32 transform: rotateY(90deg) translateZ(50px); 33 animation: shift-right 3s infinite ease-out; 34} 35 36.left { 37 transform: rotateY(-90deg) translateZ(50px); 38 animation: shift-left 3s infinite ease-out; 39} 40 41.front { 42 transform: translateZ(50px); 43 animation: shift-front 3s infinite ease-out; 44} 45 46.back { 47 transform: rotateY(-180deg) translateZ(50px); 48 animation: shift-back 3s infinite ease-out; 49} 50 51@keyframes spin { 52 33% { 53 transform: rotateX(-36deg) rotateY(-405deg); 54 } 55 56 100% { 57 transform: rotateX(-36deg) rotateY(-405deg); 58 } 59} 60 61@keyframes shift-top { 62 33% { 63 transform: rotateX(90deg) translateZ(50px); 64 } 65 66 50% { 67 transform: rotateX(90deg) translateZ(100px); 68 } 69 70 60% { 71 transform: rotateX(90deg) translateZ(100px); 72 } 73 74 75% { 75 transform: rotateX(90deg) translateZ(50px); 76 } 77} 78 79@keyframes shift-bottom { 80 33% { 81 transform: rotateX(-90deg) translateZ(50px); 82 } 83 84 50% { 85 transform: rotateX(-90deg) translateZ(100px); 86 } 87 88 60% { 89 transform: rotateX(-90deg) translateZ(100px); 90 } 91 92 75% { 93 transform: rotateX(-90deg) translateZ(50px); 94 } 95} 96 97@keyframes shift-right { 98 33% { 99 transform: rotateY(90deg) translateZ(50px); 100 } 101 102 50% { 103 transform: rotateY(90deg) translateZ(100px); 104 } 105 106 60% { 107 transform: rotateY(90deg) translateZ(100px); 108 } 109 110 75% { 111 transform: rotateY(90deg) translateZ(50px); 112 } 113} 114 115@keyframes shift-left { 116 33% { 117 transform: rotateY(-90deg) translateZ(50px); 118 } 119 120 50% { 121 transform: rotateY(-90deg) translateZ(100px); 122 } 123 124 60% { 125 transform: rotateY(-90deg) translateZ(100px); 126 } 127 128 75% { 129 transform: rotateY(-90deg) translateZ(50px); 130 } 131} 132 133@keyframes shift-front { 134 33% { 135 transform: translateZ(50px); 136 } 137 138 50% { 139 transform: translateZ(100px); 140 } 141 142 60% { 143 transform: translateZ(100px); 144 } 145 146 75% { 147 transform: translateZ(50px); 148 } 149} 150 151@keyframes shift-back { 152 33% { 153 transform: rotateY(-180deg) translateZ(50px); 154 } 155 156 50% { 157 transform: rotateY(-180deg) translateZ(100px); 158 } 159 160 60% { 161 transform: rotateY(-180deg) translateZ(100px); 162 } 163 164 75% { 165 transform: rotateY(-180deg) translateZ(50px); 166 } 167}
Comments
MIT License