时钟指针转歪是因为rotate()默认绕左上角旋转，必须显式设transform-origin: center（即50% 50%），配合position: absolute、top: 50%; left: 50%; transform: translate(-50%, -50%)精准锚定表盘中心，并禁用transition以实现真实机械感的即时旋转。
时钟指针用 transform: rotate() 为什么总转歪？
因为 rotate() 默认以元素左上角为旋转中心，而时钟指针需要绕中心点转。不设 transform-origin，秒针一动就飞出表盘外。
必须显式设为表盘中心：transform-origin: center;（等价于 50% 50%）。如果指针是绝对定位的 <div>，还要确保其父容器（表盘）有明确宽高和 position: relative，否则 center 会按整个页面计算。
- 别写
transform-origin: 0 0—— 这是默认值，也是错的起点 - 指针元素建议用
position: absolute，避免文档流干扰布局 - 用
top: 50%; left: 50%+translate(-50%, -50%)居中锚点，比单纯靠 margin 更可靠
秒针每秒转 6°，但用 setInterval 直接加会越走越慢
JavaScript 的 setInterval(fn, 1000) 并不精确：浏览器标签页休眠、JS 主线程阻塞都会导致回调延迟。几小时后可能差好几秒。
正确做法是每次取当前时间戳计算角度，而非累加：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
function updateClock() {
const now = new Date();
const secs = now.getSeconds();
const secsDeg = (secs * 6) + (now.getMilliseconds() / 1000 * 6); // 补毫秒级平滑
secondHand.style.transform = `rotate(${secsDeg}deg)`;
requestAnimationFrame(updateClock);
}- 用
requestAnimationFrame替代setInterval，更顺滑且省资源 - 别用
Math.floor(secs * 6)—— 丢掉小数会让秒针“跳”而不是“扫” - 时针、分针同理，但注意：时针每分钟也动 0.5°（360° / 12 / 60），不能只看
getHours()
CSS 里写 transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1) 有用吗？
没用，甚至有害。指针是连续运动的，加 transition 会导致每次角度更新都触发一次缓动动画，和真实钟表机械感冲突，还会在快速重绘时出现卡顿或回抽。
真正要的是“无过渡”的即时变换，所以必须禁用过渡：
- 给指针元素写死
transition: none或transition: transform 0s - 如果表盘本身有 hover 动画，确保它不会意外继承到指针上（用
all: unset或单独重置transition） - 某些旧版 Safari 对
transform频繁变更敏感，可加will-change: transform提前提示渲染层，但仅当真有性能问题时再加
为什么在移动设备上指针模糊或闪烁？
因为非整像素坐标导致浏览器亚像素渲染，尤其 rotate() 在小尺寸屏幕上容易失真。这不是 bug，是 CSS 渲染机制的常态。
缓解方式很务实：
- 指针用
backface-visibility: hidden强制 GPU 加速（对 iOS Safari 特别有效） - 宽度设为奇数像素（如
width: 3px），避免偶数宽在旋转后被平均分到两个物理像素 - 避免用
box-shadow或filter给指针加效果——它们会触发软件渲染，放大模糊 - 表盘背景用纯色或 SVG，别用 PNG 边缘抗锯齿图，否则缩放时更糊
最麻烦的细节往往藏在像素对齐和渲染路径里，而不是逻辑本身。
