Несколько направлений вращения с использованием CSS rotateX () - PullRequest
Новая
       44

Несколько направлений вращения с использованием CSS rotateX ()

0 голосов
/ 10 июля 2020

У меня простой дисплей, который переворачивается при нажатии. Я хочу добавить к движению небольшой отскок, повернув его на несколько градусов в противоположном направлении, прежде чем повернуть на полные 180 градусов, чтобы обнажить противоположную сторону.

RotateX () принимает более одного встроенного экземпляра, но он вычисляет конечный результат и не показывает оба направления. ie:

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

это приводит к повороту объекта на 180 градусов.

Я пробовал разделять их запятыми, а также просто помещал два набора градусов в скобках с аналогичными результатами.

Я пробовал поместить оба шага в @keyframes, но анимация, похоже, не работает с моим событием по щелчку в javascript.

Я также пробовал иметь каждое направление вращения в отдельном классе, которые оба активируются через classlist.toggle, но все еще не видят оба направления вращения.

вот кодовое слово с макетом выше:

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

Буду признателен за любую информацию. Спасибо!

1 Ответ

0 голосов
/ 10 июля 2020

Переходы, вероятно, не получат того, что вы хотите, поскольку вы не можете имитировать отскок с несколькими шагами. @keyframes будет работать, но вы не можете просто переключить класс. Вам нужно добавить одну, а затем добавить другую, чтобы сбросить ее.

Кроме того, вам понадобится несколько анимаций (вперед и назад), которые вы переключаете / выключаете и нажимаете. 

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