.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:#fff;animation:3s ease-in-out infinite alternate rotate16}#inner3,#inner1{transform-origin:50%;animation:4s ease-in-out infinite alternate rotate16}#center1{fill:#fff;transform-origin:50%;animation:2s ease-in-out infinite alternate rotate16}@keyframes rotate16{to{transform:rotate(360deg)}}