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

你已经差不多好了，只是调整原点而不是添加翻译：

.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>

Answer 2

添加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>

CSS 像开门一样变换

CSS Transform like open door

css

css-transitions

css-transforms