12K views
1.svg-frame { 2 position: relative; 3 width: 300px; 4 height: 300px; 5 transform-style: preserve-3d; 6 display: flex; 7 justify-content: center; 8 align-items: center; 9} 10 11.svg-frame svg { 12 position: absolute; 13 transition: .5s; 14 z-index: calc(1 - (0.2 * var(--j))); 15 transform-origin: center; 16 width: 344px; 17 height: 344px; 18 fill: none; 19} 20 21.svg-frame:hover svg { 22 transform: rotate(-80deg) skew(30deg) translateX(calc(45px * var(--i))) translateY(calc(-35px * var(--i))); 23} 24 25.svg-frame svg #center { 26 transition: .5s; 27 transform-origin: center; 28} 29 30.svg-frame:hover svg #center { 31 transform: rotate(-30deg) translateX(45px) translateY(-3px); 32} 33 34#out2 { 35 animation: rotate16 7s ease-in-out infinite alternate; 36 transform-origin: center; 37} 38 39#out3 { 40 animation: rotate16 3s ease-in-out infinite alternate; 41 transform-origin: center; 42 stroke: #ff0; 43} 44 45#inner3, 46#inner1 { 47 animation: rotate16 4s ease-in-out infinite alternate; 48 transform-origin: center; 49} 50 51#center1 { 52 fill: #ff0; 53 animation: rotate16 2s ease-in-out infinite alternate; 54 transform-origin: center; 55} 56 57@keyframes rotate16 { 58 to { 59 transform: rotate(360deg); 60 } 61}
MIT License