CSS transform perspective rotateX with transition rapidly hover in out 故障

Question

这是我的代码。

.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 1 楼快要从屏幕上出来了。为什么会发生这种情况以及如何解决？

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

CSS transform perspective rotateX with transition rapidly hover in out 故障

CSS transform perspective rotateX with transition rapidly hover in out glitch

html

css

css-transforms