CSS 实现无限连续翻转卡片效果（非往返式，支持多翻页）-js教程-PHP中文网

CSS 实现无限连续翻转卡片效果（非往返式，支持多翻页）

本文详解如何用 CSS 变量 + JavaScript 动态控制 rotateY 角度，实现卡片“单向连续翻转”——每次点击都沿同一方向再转 180°（如 0°→180°→360°→540°…），而非默认的 toggle 式往返动画（0°↔180°）。

本文详解如何用 css 变量 + javascript 动态控制 `rotatey` 角度，实现卡片“单向连续翻转”——每次点击都沿同一方向再转 180°（如 0°→180°→360°→540°…），而非默认的 toggle 式往返动画（0°↔180°）。

在标准 CSS 卡片翻转实现中，通常通过 .is-flipped 类切换 transform: rotateY(180deg) 来完成正反面切换。但这种方案本质是状态切换：添加类 → 旋转至 180°，移除类 → 回退至 0°。因此第二次点击会“反转动画”，视觉上呈现“翻回来”的效果，不符合“持续顺时针翻转”的交互预期。

要实现真正的连续单向翻转（例如：第 1 次翻到背面，第 2 次继续翻到正面但完成一整圈，第 3 次再翻到背面……即每点击一次，Y 轴旋转累加 -180°），关键在于脱离布尔状态控制，改用可累积的数值驱动。CSS 自定义属性（CSS Variables）配合 JS 动态更新，正是最优解。

✅ 核心思路

移除依赖 classList.toggle() 的二值逻辑；
使用 CSS 变量 --y 存储当前累计旋转角度（单位：deg）；
JS 为每张卡片维护独立的旋转计数器（如 let y = 0）；
每次点击时，y -= 180（或 += 180，取决于初始方向），并用 element.style.setProperty('--y',${y}deg) 实时写入；
主 transform 直接绑定该变量：transform: translateX(var(--x, 0)) rotateY(var(--y, 0));

? 完整示例代码

<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 in one direction.</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;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-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));
}

/* 可选：统一设置位移偏移（如需卡牌初始右移） */
.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 可让卡片绕自身右侧中点翻转，视觉更符合物理直觉；若设为 center center，则会以中心为轴平移翻转，可能产生“漂浮感”。
backface-visibility: hidden 必须作用于 .card__face：确保翻转过程中背面不可见，避免闪烁或重叠。
rotateY(180deg) 需预设在 .card__face--back 上：这是为了让背面内容在 rotationY = 180° 时正向显示（主容器转 180° + 子元素再转 180° = 总体 360°，即正向）。
性能优化建议：对高频翻转场景，可将 transform 替换为 will-change: transform（仅在需要时添加，避免滥用）。