css动画翻转没有后翻转答案

【问题标题】：css animation flip without back flipcss动画翻转没有后翻转
【发布时间】：2020-04-08 17:23:17
【问题描述】：

我想反复旋转我的元素，而不是后空翻。当我第一次调用我的函数时，它将rotateX（'180deg'），第二次将是rotateX（'360deg'），但是当我第三次调用它时，问题将是后空翻，所以任何想法让这个翻转保持前进没有后空翻？

function myFunction() {
  if (document.getElementById("front").style.transform == "" || document.getElementById("front").style.transform == "rotateX(0deg)") {
    document.getElementById("front").style.transform = "rotateX(180deg)";
    document.getElementById("back").style.transform = "rotateX(0deg)";
  } else if (document.getElementById("front").style.transform == "rotateX(180deg)") {
    document.getElementById("front").style.transform = "rotateX(360deg)";
    document.getElementById("back").style.transform = "rotateX(180deg)";
  } else {
    document.getElementById("front").style.transform = "";
    document.getElementById("back").style.transform = "rotateX(-180deg)";
  }
}

.flipcard {
  position: relative;
  width: 220px;
  height: 160px;
  perspective: 500px;
}

.flipcard.h .back {
  transform: rotateX(-180deg);
}

.flipcard .front,
.flipcard .back {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.5s ease-in;
  color: white;
  background-color: #000;
  padding: 10px;
  backface-visibility: hidden;
}

<div class="flipcard h">
  <div class="front" id="front">
    This is the front side
  </div>
  <div class="back" id="back">
    This is the back side
  </div>
</div>
<button onclick="myFunction()">Flip The Image</button>

【问题讨论】：

标签： css css-animations

【解决方案1】：

简化 DOM，简化JS，优化CSS。

这是制作旋转卡片的最佳方法：

var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
  card.classList.toggle('is-flipped');
});

body { font-family: sans-serif; }

.card {
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
  width: 200px;
  height: 260px;
  border: 1px solid #CCC;
  margin: 40px 0;
  perspective: 600px;
}

.card.is-flipped {
  transform: rotateX(-180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  backface-visibility: hidden;
}

.card__face--front {
  background: red;
}

.card__face--back {
  background: blue;
  transform: rotateX(180deg);
}

<div class="card">
    <div class="card__face card__face--front">front</div>
    <div class="card__face card__face--back">back</div>
  </div>

【讨论】：

【解决方案2】：

你可以这样做：

$('#btnClick').click(function() {
  $('.flip-container').toggleClass("flipped");
});

.flip-container.flipped .flipper {
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);
  position: relative;
}

.flip-container,
.front,
.back {
  width: 200px;
  height: 200px;
}

.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 500;
  cursor: pointer;
  top: 0;
  width: 200px;
  height: 200px;
}

.flip-container .back {
  transform: rotateX(-180deg);
  background-color: #000;
}

.flipper {
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;
  -o-transition: 0.6s;
  -o-transform-style: preserve-3d;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
  width: 200px;
  height: 200px;
  display: block;
}

.flip-container .front,
.flip-container .back {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.6s ease-in;
  color: white;
  background-color: #000;
  padding: 10px;
  backface-visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <p>This is the front side </p>
    </div>
    <div class="back">
      <p> This is the back side </p>
    </div>
  </div>
</div>
<button id="btnClick">Flip The Image</button>

【讨论】：