元素不适用于 css3 中的过渡

Question

我是 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>

感谢任何帮助，请解释过渡、变换和动画如何相互关联

Answer 1

.wrapper {
display: flex;
align-items: stretch; 
perspective: 1500px;    
 }
 .sideBar{
  height: 100vh;
  width: 20%;
  transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
  transform-origin: center left; /* Set the transformed position of sidebar to center left side. */
  background: teal; 
 }
 .sideBarHvr{ 
  margin-left: -330px;       
  transform: rotateY(100deg);
  }