CSS 卡片连续翻转：实现无限单向旋转效果-js教程-PHP中文网

CSS 卡片连续翻转：实现无限单向旋转效果

本文讲解如何用 CSS 变量 + JavaScript 动态更新旋转角度，替代简单的 toggle 类切换，使卡片每次点击都沿同一方向持续翻转（如 0° → −180° → −360° → −540°），而非来回往返式“正反切换”。

本文讲解如何用 css 变量 + javascript 动态更新旋转角度，使卡片每次点击都沿同一方向持续翻转（如 0° → −180° → −360° → −540°），而非来回往返式“正反切换”。

在实现 CSS 卡片翻转（flip card）效果时，常见做法是通过 classList.toggle('is-flipped') 切换一个预设的 transform: rotateY(-180deg) 样式。这种方式虽能完成“正面→背面”的首次翻转，但再次点击会回退到原始状态（0°），形成“正-反-正-反”的往复动画——而实际项目中，我们常需要单向连续翻转：每点一次，就再转 180°，视觉上如同无限卷轴或真实纸牌持续旋转。

要突破这一限制，关键在于放弃静态类控制，改用动态角度驱动。核心思路是：

使用 CSS 自定义属性（--y）作为旋转角度的变量载体；
在 JavaScript 中为每个卡片维护独立的旋转状态（如 y = 0, -180, -360...）；
每次点击时，更新该变量并应用到 transform，从而实现累加式旋转。

以下是完整可运行的实现方案：

<div class="scene scene--card">
  <div class="card">
    <div class="card__face card__face--front">front</div>
    <div class="card__face card__face--back">back</div>
  </div>
</div>
<div class="scene scene--card">
  <div class="card">
    <div class="card__face card__face--front">front</div>
    <div class="card__face card__face--back">back</div>
  </div>
</div>
<p>Click card to flip continuously.</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
														src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
													<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
												</div>
												<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>

body { font-family: sans-serif; }

.scene {
  display: inline-block;
  width: 200px;
  height: 260px;
  margin: 40px 0;
  perspective: 600px; /* 必须设置，否则 3D 效果失效 */
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d; /* 保持子元素 3D 空间关系 */
  transform-origin: center right; /* 绕右侧中点翻转，更符合“翻页”直觉 */
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 缓动更自然 */
  transform: translateX(var(--x, 0)) rotateY(var(--y, 0));
}

/* 仅用于控制横向偏移，非必须，但配合 rotateY 更易理解翻转逻辑 */
.card.is-flipped {
  --x: -100%;
}

.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: crimson;
}

.card__face--back {
  background: slateblue;
  transform: rotateY(180deg); /* 背面初始即旋转 180°，确保正向显示 */
}

const cards = document.querySelectorAll('.card');

cards.forEach(card => {
  let rotationY = 0;

  card.addEventListener('click', () => {
    rotationY -= 180; // 每次减 180°，实现顺时针连续翻转
    card.style.setProperty('--y', `${rotationY}deg`);
  });
});

✅ 关键要点说明：

transform-origin: center right 让翻转以卡片右侧为轴心，更贴近真实翻页体验；
backface-visibility: hidden 必须作用于 .card__face，否则翻转过程中可能短暂出现双面叠加；
rotateY(180deg) 已预设在 .card__face--back 上，因此无论 --y 值如何变化，背面内容始终正向显示；
使用 cubic-bezier() 自定义缓动，比默认 ease 更具动感；
多卡片独立维护 rotationY，互不干扰——这是闭包与局部变量的经典实践。

⚠️ 注意事项：

若需支持“重置为初始状态”，可额外添加 reset() 方法将 rotationY 设为 0 并清除 --y；
过度旋转（如 −3600°）理论上不影响渲染，但建议在业务逻辑中按需取模（如 rotationY %= 360）保持数值整洁；
Safari 对 transform 中 var(--y) 的解析偶有延迟，可添加 will-change: transform 提升渲染性能（谨慎使用）。