diff --git a/client/css/body.css b/client/css/body.css index 4569530..eb0fe78 100644 --- a/client/css/body.css +++ b/client/css/body.css @@ -9,7 +9,8 @@ body { perspective: 1000px; max-width: 400px; width: 100%; - height: 500px; /* 固定高度,避免翻转时高度变化 */ + height: 500px; + position: relative; } .flip-card-inner { @@ -17,10 +18,12 @@ body { width: 100%; height: 100%; text-align: center; - transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); + transition: transform 0.3s ease; transform-style: preserve-3d; - transform-origin: center center; /* 设置旋转中心为卡片中心 */ - transform: rotateX(0deg); /* 初始状态 */ +} + +.flip-card-inner.flipped { + transform: rotateX(180deg); } .flip-card-front, @@ -30,7 +33,6 @@ body { left: 0; width: 100%; height: 100%; - backface-visibility: hidden; border-radius: 14px; padding: 39px 15px 20px 15px; box-shadow: 0 2px 16px rgba(60, 80, 100, 0.09); @@ -38,6 +40,7 @@ body { box-sizing: border-box; display: flex; flex-direction: column; + backface-visibility: hidden; } .flip-card-back { @@ -63,7 +66,7 @@ body { z-index: 10; } -/* Firefox兼容性修复:控制翻转时按钮的可见性 */ +/* 控制翻转时按钮的可见性 */ .flip-card-inner.flipped .flip-card-front .help-btn { visibility: hidden; opacity: 0; diff --git a/client/js/ui.js b/client/js/ui.js index 6a7a8f2..73ec520 100644 --- a/client/js/ui.js +++ b/client/js/ui.js @@ -617,117 +617,33 @@ export function initFlipCard() { if (!flipCard || !helpBtn || !backBtn) return; - // 检测是否为触摸设备 / Detect touch device - // 更准确的触摸设备检测方法 - const isTouchDevice = window.matchMedia('(hover: none) and (pointer: coarse)').matches; + const flipCardInner = flipCard.querySelector('.flip-card-inner'); + if (!flipCardInner) return; - // 当前旋转角度 / Current rotation angle - let currentRotation = 0; - // 执行翻转操作 / Execute flip operation - function performFlip() { - currentRotation += 180; - const flipCardInner = flipCard.querySelector('.flip-card-inner'); - if (flipCardInner) { - flipCardInner.style.transform = `rotateX(${currentRotation}deg)`; - - // 添加或移除flipped类来控制按钮可见性(Firefox兼容性修复) - if (currentRotation % 360 === 180 || currentRotation % 360 === -180) { - flipCardInner.classList.add('flipped'); - } else { - flipCardInner.classList.remove('flipped'); - } + // 翻转状态 + let isFlipped = false; + + // 简单的翻转函数 + function toggleFlip() { + isFlipped = !isFlipped; + if (isFlipped) { + flipCardInner.classList.add('flipped'); + } else { + flipCardInner.classList.remove('flipped'); } } - if (isTouchDevice) { - // 移动端:点击切换 / Mobile: click to toggle - helpBtn.addEventListener('click', (e) => { - e.preventDefault(); - e.stopPropagation(); - performFlip(); - }); - - backBtn.addEventListener('click', (e) => { - e.preventDefault(); - e.stopPropagation(); - performFlip(); - }); } else { - // 桌面端:鼠标悬停持续旋转 / Desktop: hover to continuously rotate - let rotationInterval; - let isHovering = false; - - // 开始持续旋转 - function startContinuousRotation() { - if (isHovering) return; // 已经在旋转中 - isHovering = true; - - // 立即执行一次旋转 - performFlip(); - - // 然后每800ms旋转一次(与CSS动画时长一致) - rotationInterval = setInterval(() => { - if (isHovering) { - performFlip(); - } - }, 800); - } - - // 停止持续旋转 - function stopContinuousRotation() { - isHovering = false; - if (rotationInterval) { - clearInterval(rotationInterval); - rotationInterval = null; - } - } - - // 检查鼠标是否在任一按钮上 - function isMouseOverButton(e) { - const helpBtnRect = helpBtn.getBoundingClientRect(); - const backBtnRect = backBtn.getBoundingClientRect(); - const x = e.clientX; - const y = e.clientY; - - // 检查是否在帮助按钮上 - const onHelpBtn = x >= helpBtnRect.left && x <= helpBtnRect.right && - y >= helpBtnRect.top && y <= helpBtnRect.bottom; - - // 检查是否在返回按钮上 - const onBackBtn = x >= backBtnRect.left && x <= backBtnRect.right && - y >= backBtnRect.top && y <= backBtnRect.bottom; - - return onHelpBtn || onBackBtn; - } - - // 监听整个卡片的鼠标移动 - flipCard.addEventListener('mousemove', (e) => { - if (isMouseOverButton(e)) { - if (!isHovering) { - startContinuousRotation(); - } - } else { - if (isHovering) { - stopContinuousRotation(); - } - } - }); - - // 监听鼠标离开卡片 - flipCard.addEventListener('mouseleave', () => { - stopContinuousRotation(); - }); - - // 按钮点击事件(保持原有功能) - helpBtn.addEventListener('click', (e) => { - e.preventDefault(); - e.stopPropagation(); - performFlip(); - }); - - backBtn.addEventListener('click', (e) => { - e.preventDefault(); - e.stopPropagation(); - performFlip(); - }); - } + // 帮助按钮点击事件 + helpBtn.addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + toggleFlip(); + }); + + // 返回按钮点击事件 + backBtn.addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + toggleFlip(); + }); } \ No newline at end of file