CSS Transform 就像打开的门

Question

我正在尝试制作开门和关门的动画但是我在某个地方犯了一个错误左上角和左下角看起来不像我想要的也许有人知道问题出在哪里这是我的代码

.container{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flipbox{
  
  height: 420px;
  width: 240px;
  border: 18px solid grey;
  
}
.flipbox-active{
  height: 420px;
  width: 240px;
  background-color: #000;
  
  
}
.flipbox-active:hover{
  transform: perspective(1200px) rotateY(40deg) translateX(-10%);
  transition: .45s;
}

<div class="container">
  <div class="flipbox">
    <div class="flipbox-active">
    </div>
  </div>
</div>

Answer 1

添加transform-origin: left

.container{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flipbox{
  
  height: 420px;
  width: 240px;
  border: 18px solid grey;
  
}
.flipbox-active{
  height: 420px;
  width: 240px;
  background-color: #000;
  transform-origin: left;
  transition: transform .45s;
  
  
}
.flipbox-active:hover{
  transform: perspective(1200px) rotateY(40deg);
}

<div class="container">
  <div class="flipbox">
    <div class="flipbox-active">
    </div>
  </div>
</div>