js自动翻转特效代码

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <!-- 正面内容 -->
      <h2>Front</h2>
    </div>
    <div class="flip-card-back">
      <!-- 背面内容 -->
      <h2>Back</h2>
    </div>
  </div>
</div>

.flip-card {
  perspective: 1000px; /* 设置透视 */
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s; /* 翻转动画时间 */
  transform-style: preserve-3d; /* 保持3D效果 */
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg); /* 鼠标悬停时翻转 */
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 隐藏背面 */
}

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

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg); /* 背面默认翻转 */
}

function autoFlipCard(card, interval) {
  let isFlipped = false;
  setInterval(() => {
    if (isFlipped) {
      card.querySelector('.flip-card-inner').style.transform = 'rotateY(0deg)';
    } else {
      card.querySelector('.flip-card-inner').style.transform = 'rotateY(180deg)';
    }
    isFlipped = !isFlipped;
  }, interval);
}

// 使用示例
const card = document.querySelector('.flip-card');
autoFlipCard(card, 2000); // 每2秒翻转一次