修改卡片翻转动画触发方式：将hover触发改为定时触发

没问题！把鼠标悬停触发的卡片翻转改成页面加载后3秒自动触发其实很简单，我帮你调整了代码，同时会解释改动的逻辑，方便你理解~

核心改动思路 #

原来的代码是通过监听鼠标hover事件来切换卡片的flipped类实现翻转，现在我们只需要用JavaScript的定时函数来替代hover事件即可：

• 使用setTimeout实现单次延迟翻转（页面加载3秒后翻一次）
• 如果需要循环翻转，就用setInterval配合setTimeout实现延迟后循环翻转

完整代码示例 #

情况1：页面加载3秒后仅翻转一次 #

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 { text-align: center; }
    .container { width: 200px; height: 260px; position: relative; margin: 0 auto 40px; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; display: inline-block; }
    #main { border: 1px solid black; }
    button { width: 30%; height: 10%; margin-top: 100px; cursor: default; }
    .card { width: 100%; height: 100%; position: absolute; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: right center; -moz-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; }
    .card.flipped { -webkit-transform: translateX( -100%) rotateY( -180deg); -moz-transform: translateX( -100%) rotateY( -180deg); -o-transform: translateX( -100%) rotateY( -180deg); transform: translateX( -100%) rotateY( -180deg); }
    .card div { height: 100%; width: 100%; color: white; text-align: center; font-weight: bold; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; cursor: pointer; }
    .card .front { background: red; display: flex; justify-content: center; align-items: center; }
    .card .back { background: blue; -webkit-transform: rotateY( 180deg); -moz-transform: rotateY( 180deg); -o-transform: rotateY( 180deg); transform: rotateY( 180deg); display: flex; justify-content: center; align-items: center; }
  </style>
</head>
<body>
  <div class="container-fluid">
    <div id="main"><br>
      <section class="container">
        <div class="card">
          <div class="front">
            <p>Test</p>
          </div>
          <div class="back">
            <p>MyBack</p>
          </div>
        </div>
      </section>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() { 
      // 页面加载完成后，延迟3秒执行一次翻转
      setTimeout(function() {
        $(".card").toggleClass('flipped');
      }, 3000); // 3000毫秒 = 3秒
    });
  </script>
</body>
</html>

情况2：页面加载3秒后开始，每3秒循环翻转 #

如果希望卡片能持续自动翻转，只需要把JavaScript部分改成这样：

$(document).ready(function() { 
  // 先等待3秒，然后开始每3秒翻转一次
  setTimeout(function() {
    setInterval(function() {
      $(".card").toggleClass('flipped');
    }, 3000);
  }, 3000);
});

关键代码解释 #

• setTimeout(function(){...}, 3000)：这个函数会在页面加载完成后，等待3秒再执行内部的翻转代码，完全符合你“页面加载后3秒启动”的需求
• toggleClass('flipped')：保留了原代码的核心逻辑，它会给.card元素添加或移除flipped类，从而触发CSS定义的翻转动画
• setInterval(function(){...}, 3000)：如果需要循环翻转，这个函数会每隔3秒重复执行翻转操作，外面套一层setTimeout是为了确保先等3秒再开始循环

内容的提问来源于stack exchange，提问作者Leo