Элемент не работает для переходов в css3

Я новичок в анимации css3, которую я делаю, это вертикальное меню, которое скрывается, а затем при нажатии кнопки m поворачивает его с помощью оси Y, что делает его видимым, но вращаются как левая, так и правая граница

Мне нужно вертикальное меню, которое скрывается при нажатии кнопки, поверните его с помощью оси Y, чтобы оно было видимым, поверните только правую границу, я хочу повернуть только правую сторону границы, сохраняя левую границу жесткой до высоты экрана и при нажатии кнопки строка меню должна полностью исчезать, это нужно сделать с помощью css3 или js

m с помощью vue js для переключения

ниже мой код

.wrapper {
   display: flex;
   align-items: stretch; 
   perspective: 1500px;    
 }
 .sideBar{
   border: 1px solid black;
   height: 100vh;
   width: 40%;
   transition:transform .8s ease-in-out;
   animation-name: fadeOut;   
  }
 .sideBarHvr{        
    transform: rotateY(45deg);
  }

это html n css3, который нужно применить к нему

    <div class = "wrapper">
    <nav class = "sideBar" v-bind:class = "[showSideBar?'sideBarHvr':'']" >            
    </nav>      
            <div class = "container-fluid">                    
                    <button type = "button" class = "btn btn-info" @click='toggleSideBar' id = "barCollapse">
                         <i class = "fa fa-bars" ></i>
                    </button>                    
            </div>            
   </div>

любая помощь приветствуется и, пожалуйста, объясните переход, преобразование и анимацию, как они взаимосвязаны