使用 CSS rotateX() 的多个旋转方向

Question

我有一个简单的显示，可以在点击时翻转。我想在旋转完整 180 度以显示另一侧之前通过在相反方向旋转几度来为运动添加一点弹跳。

RotateX() 将接受多个内联实例，但它会计算最终结果并且不会显示两个方向。即：

transform: rotateX(-10deg) rotateX(190deg)

这导致对象旋转 180 度。

我试过用逗号分隔它们，以及在括号中放置两组递减，结果相似。

我已经尝试将这两个步骤都放入@keyframes 中，但动画似乎不适用于 javascript 中的单击事件。

我也试过将每个旋转方向放在一个单独的 class 中，它们都通过 classlist.toggle 激活，但仍然看不到两个旋转方向。

这是上面模拟的代码笔：

https://codepen.io/Boreetos22/pen/WNrJEvR

如有任何见解，我将不胜感激。谢谢！

Answer 1

Transitions 可能不会得到您想要的结果，因为您无法通过多个步骤来伪造反弹。 @keyframes 会起作用，但您不能简单地切换 class。您需要添加一个，然后再添加一个才能重置它。

此外，您需要多个动画（前进和后退），您可以在 over/out 上更改并单击。

let sides = document.querySelector('.sides');
sides.addEventListener( 'click', function(e) {
  if(sides.classList.contains('flip-forward')){
    sides.classList.remove('flip-forward');
    sides.classList.add('flip-backward');
  }else{
    sides.classList.add('flip-forward');
    sides.classList.remove('flip-backward');
  }
});

* {
  padding: 0;
  margin: 0;
}

h2 {
  margin-top: 12px;
  font-size: 30px;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  justify-content: center;
  height: 60px;
  width: 400px;
  perspective: 1000px;
}

@keyframes myAnimationFwrd {
  /* has bounce */

    24% {
        transform: rotateX( -40deg)
    }

    36% {
        transform: rotateX( 0)
    }

    100% {
        transform: rotateX( 190deg)
    }

}
@keyframes myAnimationBkwrd {

 /* no bounce add more steps to enable */
    0% {
        transform: rotateX( 190deg)
    }

    100% {
        transform: rotateX( 0deg)
    }

}
.flip-forward {
  animation: myAnimationFwrd 1s forwards;
}
.flip-backward {
  animation: myAnimationBkwrd 1s forwards;
}

.sides {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  transform-style: preserve-3d; 
  cursor: pointer;
}

.red, .black {
  text-align: center;
  color: white;
  height: 100%;
  width: 100%;
  border-radius: 30px;
  box-shadow: 2px 2px 4px black;
  position: absolute;
  backface-visibility: hidden;
}

.red {
  background-color: darkred;
  z-index: 2;
}

.black {
  background-color: black;
  z-index: 1;
  transform: rotateX(180deg);
}

<div class="container">
  <div class="sides">
    <div class="red">
      <h2>PLAYER ONE'S TURN</h2> 
    </div>
    <div class="black">
      <h2>PLAYER TWO'S TURN</h2> 
    </div>
  </div>
</div>

使用 CSS rotateX() 的多个旋转方向

Multiple rotation directions using CSS rotateX()

css

rotation

css-animations