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