.svg-frame{align-items:center;display:flex;height:300px;justify-content:center;position:relative;transform-style:preserve-3d;width:300px}.svg-frame svg{fill:none;height:344px;position:absolute;transform-origin:center;transition:.5s;width:344px;z-index:calc(1 - var(--j)*.2)}.svg-frame:hover svg{transform:rotate(-80deg) skew(30deg) translate(calc(45px*var(--i))) translateY(calc(-35px*var(--i)))}.svg-frame svg #center{transform-origin:center;transition:.5s}.svg-frame:hover svg #center{transform:rotate(13deg) translate(45px) translateY(-3px)}#out2{animation:rotate16 7s ease-in-out infinite alternate}#out2,#out3{transform-origin:center}#out3{animation:rotate16 3s ease-in-out infinite alternate;stroke:#ffc400}#inner1,#inner3{animation:rotate16 4s ease-in-out infinite alternate;transform-origin:center}#center1{animation:rotate16 2s ease-in-out infinite alternate;transform-origin:center}@keyframes rotate16{to{transform:rotate(1turn)}}