HTML4+JavaScript中如何获取圆形z值并实现对象旋转效果

你当前的圆形排布逻辑是给每个索引对应的元素分配固定角度，通过三角函数换算平面坐标。要实现旋转效果，核心是给所有点的基础角度叠加统一的旋转偏移量；如果需要用到Z轴深度属性，只需要额外增加透视投影计算，用Z值控制元素的缩放、层级、透明度模拟3D效果即可。

首先建议替换掉原代码里的eval写法，eval存在性能和安全隐患，提前把元素缓存到数组里操作更稳妥。以下分两种场景给出可直接运行的实现： #

2D平面绕圆心旋转（无Z轴深度） #

不需要3D效果的话，实现逻辑非常简单，维护一个全局旋转角度变量，每帧更新角度后重算所有点的坐标即可：

// 缓存所有点元素，替代eval
const pointEls = Array.from({ length: 61 }, (_, i) => window[`p${i}`]);
const CONFIG = {
  centerX: 180,
  centerY: 180,
  radius: 120,
  speed: 0.02 // 旋转速度，数值越大转动越快
};
let rotation = 0;

function renderFrame() {
  rotation += CONFIG.speed;
  pointEls.forEach((el, index) => {
    // 每个点的基础角度叠加全局旋转偏移
    const currentAngle = index / 9.6 + rotation;
    el.style.top = Math.sin(currentAngle) * CONFIG.radius + CONFIG.centerY + 'px';
    el.style.left = Math.cos(currentAngle) * CONFIG.radius + CONFIG.centerX + 'px';
    el.textContent = '*';
  });
  requestAnimationFrame(renderFrame);
}
// 启动动画
renderFrame();

带Z轴属性的3D透视旋转 #

如果需要实现带深度的3D旋转效果，需要计算每个点的Z轴坐标，再根据透视规则把3D坐标映射到2D屏幕上，用Z值控制元素的视觉表现：

const pointEls = Array.from({ length: 61 }, (_, i) => window[`p${i}`]);
const CONFIG = {
  centerX: 180,
  centerY: 180,
  radius: 120,
  speed: 0.02,
  perspective: 300 // 透视强度，值越小近大远小效果越明显
};
let rotation = 0;

function renderFrame() {
  rotation += CONFIG.speed;
  pointEls.forEach((el, index) => {
    const baseAngle = index / 9.6 + rotation;
    // 计算三维坐标
    const x = Math.cos(baseAngle) * CONFIG.radius;
    const z = Math.sin(baseAngle) * CONFIG.radius; // 你需要的Z轴属性值
    const y = 0; // 保留正圆形就设为0，改值可以实现倾斜旋转的椭圆效果

    // 透视投影换算：Z值越大（离观察者越近），缩放比例越高
    const scale = CONFIG.perspective / (CONFIG.perspective - z);
    const screenX = x * scale + CONFIG.centerX;
    const screenY = y * scale + CONFIG.centerY;

    // 应用样式
    el.style.top = screenY + 'px';
    el.style.left = screenX + 'px';
    el.style.transform = `scale(${scale})`;
    el.style.opacity = Math.min(1, scale / 1.8); // 近的元素更清晰，远的更淡
    el.style.zIndex = Math.round(z + CONFIG.radius); // 近的元素覆盖在远的上方
    el.textContent = '*';
  });
  requestAnimationFrame(renderFrame);
}
renderFrame();

前置样式要求：所有点元素需要设置position: absolute，父容器需要设置position: relative，否则top/left定位不会生效。

内容的提问来源于stack exchange，提问作者Lugha Sørensen