CSS变形像敞开的门

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>

Answer 2

你几乎是好的，只需调整原点而不是添加翻译：

.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;
  
  
}
.flipbox-active:hover{
  transform: perspective(1200px) rotateY(40deg);
  transition: .45s;
}

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