JSFiddle - React, Tailwind, and code Playground

HTML

<a href="javascript:void(0);" class="nav__item-link">
    <span class="nav__item-button"></span>
</a>

SCSS

.nav__item-link {
        display: block;
        height: 100px;
        width: 100px;
        background: #08f;
    }
.nav__item-button {
        display: block;
        height: 100px;
        width: 100px;
        background: #ccc;
        transition: .5s ease-out;
        -webkit-transform: perspective(100px) rotateY(0);
        -moz-transform: perspective(100px) rotateY(0);
        -ms-transform: perspective(100px) rotateY(0);
        -o-transform: perspective(100px) rotateY(0);
        transform: perspective(100px) rotateY(0);
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -ms-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
        cursor: pointer;
    }
    
.nav__item-link:hover .nav__item-button {
        -webkit-transform: perspective(100px) rotateY(22.5deg);
        -moz-transform: perspective(100px) rotateY(22.5deg);
        -ms-transform: perspective(100px) rotateY(22.5deg);
        -o-transform: perspective(100px) rotateY(22.5deg);
        transform: perspective(100px) rotateY(22.5deg);
    }