时间戳

首页 > 解决方案 > 使用 CSS rotateX() 的多个旋转方向

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

问题描述

我有一个简单的显示，点击时会翻转。我想通过在相反的方向旋转几度来为运动添加一点反弹，然后再旋转完整的 180 度以显示对面。

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

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

这导致对象旋转 180 度。

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

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

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

这是一个上面模拟的codepen：

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

我会很感激任何见解。谢谢！

标签： cssrotationcss-animations

解决方案

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

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

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>

推荐阅读