CSS变换透视旋转X与过渡快速悬停在故障中答案

【问题标题】：CSS transform perspective rotateX with transition rapidly hover in out glitchCSS变换透视旋转X与过渡快速悬停在故障中
【发布时间】：2020-06-01 18:57:53
【问题描述】：

这是我的代码。

.ground {
        height: 250px;
        width: 250px;
        background-color: tomato;
        margin: 50vh auto;
        transform: translateY(-50%);
    }

    .floor-1 {
        height: 100%;
        width: 100%;
        background-color: turquoise;
        transition: transform 3s;
    }

    .floor-1:hover {
        transform-origin: left center;
        transform: perspective(50em) rotateX(180deg);
    }

<div class="ground">
    <div class="floor-1">Hello</div>
</div>

现在当我尝试进出 5-10 次是 2-3 秒时，它给了我奇怪的行为。 Div floor-1 几乎要从屏幕中出来了。为什么会发生这种情况以及如何解决？

【问题讨论】：

标签： html css css-transforms

【解决方案1】：

您最初需要在元素上使用persepctive，否则这个元素也会有过渡，从而造成您得到的不良效果。 transform-origin 也一样。

.ground {
  height: 250px;
  width: 250px;
  background-color: tomato;
  margin: 50vh auto;
  transform: translateY(-50%);
}

.floor-1 {
  height: 100%;
  width: 100%;
  background-color: turquoise;
  transition: transform 3s;
  transform-origin: left center;
  transform: perspective(50em) rotateX(0deg);
}

.floor-1:hover {
  transform: perspective(50em) rotateX(180deg);
}

<div class="ground">
  <div class="floor-1">Hello</div>
</div>

你也可以在父元素上添加透视图：

.ground {
  height: 250px;
  width: 250px;
  background-color: tomato;
  margin: 50vh auto;
  transform: translateY(-50%);
  perspective:50em;
  perspective-origin:left center;
}

.floor-1 {
  height: 100%;
  width: 100%;
  background-color: turquoise;
  transition: transform 3s;
  transform:  rotateX(0deg);
}

.floor-1:hover {
  transform: rotateX(180deg);
}

<div class="ground">
  <div class="floor-1">Hello</div>
</div>

【讨论】：