如何使用带有 javascript 的 rotateY 为翻转卡片制作动画？答案

【问题标题】：How use rotateY with javascript to animate flipcards?如何使用带有 javascript 的 rotateY 为翻转卡片制作动画？
【发布时间】：2020-07-07 14:39:45
【问题描述】：

大家好，我想在页面加载时将卡片翻转 25 度，然后再翻转 -25 度。我已经使用了 rotateY，但卡片只旋转一次。我应该使用 settimeout 函数进行第二次样式更改吗？

用例：我想向用户展示他们可以将鼠标悬停在他们身上并看到后面，因此我试图在页面加载时移动 +25 度和 -25 度

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}
</style>
</head>
<body>

<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>John Doe</h1> 
      <p>Architect & Engineer</p> 
      <p>We love that guy</p>
    </div>
  </div>
</div>
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>John Doe</h1> 
      <p>Architect & Engineer</p> 
      <p>We love that guy</p>
    </div>
  </div>
</div>
<script>
$(".flip-card").css({ 'transform':'rotateY(-25deg)'});
$(".flip-card").css({ 'transform':'rotateY(+25deg)'});
</script>
</body>
</html>

在这里你可以找到一个演示https://www.w3schools.com/code/tryit.asp?filename=GGID52DZ542M

【问题讨论】：

是的，你需要暂停。
我已经改成了这个，但它仍然没有回到初始位置 $(".flip-card").css({ 'transform':'rotateY(-25deg)'}); setTimeout(function(){ $(".flip-card").css({ 'transform':'rotateY(25deg)'}); }, 500);
或将 Y 旋转为零？

标签： javascript html jquery css animation

【解决方案1】：

我不知道 jQuery，但是使用 JavaScript，你可以这样做：

const h1 = document.querySelector("h1");
h1.classList.add("red");
window.setTimeout(() => h1.classList.remove("red"), 1111);

.red {
  color: red;
}

&lt;h1&gt;Foo&lt;/h1&gt;

【讨论】：