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 Transform像开门一样

2 个答案: