Я новичок в анимации css3. У меня есть вертикальное меню, которое скрыто, а затем при нажатии кнопки я поворачиваю его, используя ось Y, что делает его видимым, но левая и правая границы вращаются.
Мне нужно вертикальное меню, которое скрыто при нажатии кнопки, поверните его, используя ось Y, чтобы сделать его видимым, вращая только правую границу, я хочу повернуть только правую сторону границы, сохраняя левую границу жесткой по высоте экрана и при нажатии кнопки строка меню должна полностью исчезать, это нужно сделать с помощью css3 или js
м, используя 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>
любая помощь приветствуется, и, пожалуйста, объясните переход, преобразование и анимацию, как это взаимосвязано
