iOS端CSS旋转异常：幸运大转盘奖品匹配不符问题求助

首先先修正代码中的低级拼写错误，这可能是导致角度计算错误的核心原因之一：
所有wheelItems.lenght都要改为wheelItems.length（两处：startRotation和createCircle函数中）。

核心问题分析 #

iPhone设备上的角度偏差，大概率是浏览器对CSS transform的浮点精度处理差异，或者动画结束时的角度累计误差。依赖读取CSS transform值验证会面临格式不一致、解析复杂的问题，最可靠的方式是自己跟踪旋转的累计角度，再通过数学计算验证结果是否匹配目标奖品。

具体实现步骤 #

1. 修正角度计算逻辑（修复拼写+明确参数传递） #

function startRotation(target){
  let giftIndex = parseInt(target.attr('id'));
  const count = wheelItems.length; // 修正拼写
  const sliceAngle = 360 / count; // 每个奖品占据的角度
  // 保持原逻辑：让指针落在奖品区域1/3的位置
  let angle = 360 - ((giftIndex - 1) * sliceAngle) - (sliceAngle / 3);
  angle = angle === 360 ? 0 : angle;
  // 传递验证所需的参数：目标角度、奖品总数、目标索引
  rotate(target, angle, count, giftIndex);
}

2. 改造旋转函数，添加验证与修正逻辑 #

let ri = 0; // 累计旋转圈数计数器，建议用闭包封装避免全局污染

function rotate(target, targetAngle, count, giftIndex) {
  const sliceAngle = 360 / count;
  // 计算总旋转角度：目标角度 + 5整圈（1800度）* 累计次数
  const totalRotateAngle = targetAngle + (1800 * ri);
  ri++;
  
  // 执行旋转动画
  $(".mainCircle").css('transform', `translate(-50%, -50%) rotate(${totalRotateAngle}deg)`);

  setTimeout(() => {
    // 计算最终停留的角度（取模360，得到0-360范围内的实际角度）
    const finalAngle = totalRotateAngle % 360;
    // 转换为指针指向的角度（因为转盘旋转，指针固定在顶部，所以反向计算）
    const pointerAngle = (360 - finalAngle) % 360;
    // 计算当前指针指向的奖品索引
    const currentGiftIndex = Math.floor(pointerAngle / sliceAngle) + 1;

    if (currentGiftIndex === giftIndex) {
      // 结果正确，执行领奖逻辑
      winPrize(target);
    } else {
      // 结果偏差，计算需要补转的角度，直接修正到正确位置
      const errorOffset = (giftIndex - currentGiftIndex) * sliceAngle;
      const correctAngle = totalRotateAngle + errorOffset;
      // 添加平滑过渡动画，避免生硬跳转
      $(".mainCircle").css({
        'transition': 'transform 0.5s ease-out',
        'transform': `translate(-50%, -50%) rotate(${correctAngle}deg)`
      });
      // 过渡结束后重置样式，执行领奖逻辑
      setTimeout(() => {
        $(".mainCircle").css('transition', '');
        winPrize(target);
      }, 500);
    }
  }, 7500);
}

3. 修正转盘创建函数的拼写错误 #

function createCircle(wheelItems){
  let colors = ['#16A085', '#2989B9',  '#8E44AD', '#F39C12', '#D35400', '#C0392B', 'cyan', 'brown', 'gray', 'pink', 'maroon', 'gold']
  let count = wheelItems.length; // 修正拼写
  for (let i = 0; i < count; i++) {
    // 原逻辑保持不变，仅修正length拼写
    let img = document.createElement('img')
    let text = document.createElement('span')
    text.innerHTML = wheelItems[i].title
    img.src = '/wheel/'+wheelItems[i].title;
    img.style.transform = 'skewY('+ Math.abs(90 - (360 / count)) +'deg) rotate('+ 360 / count / 2 + 'deg)'
    img.style.width = (40 - ((count - 4) * 3.125)) + '%'
    img.style.left = (34 - ((count - 4) * 1.75)) + '%'
    img.style.paddingTop = (43 + ((count - 4) * 3.25)) + '%'
    text.style.transform = 'skewY('+ Math.abs(90 - (360 / count)) +'deg) rotate('+ 360 / count / 2 + 'deg)'
    text.style.width = (50 - ((count - 4) * 3.125)) + '%'
    text.style.left = (25 - ((count - 4) * 1.75)) + '%'
    text.style.paddingTop = (75 + ((count - 4) * 3.25)) + '%'
    $('li')
        .css({'transform': 'rotate(' + i * (360 / count) + 'deg) skewY(-' + Math.abs(90 - (360 / count)) + 'deg)', 'background' : colors[i]})
        .appendTo('ul.mainCircle')
        .addClass('item' + i)
        .append(img)
        .append(text)
  }
}

为什么这个方案有效？ #

1. 避免依赖CSS读取：通过自己维护累计旋转角度，完全不依赖getComputedStyle读取transform值，规避了不同浏览器的解析差异。
2. 数学计算验证：通过角度取模和区间计算，精准判断指针指向的奖品，不受动画精度影响。
3. 平滑修正：如果出现偏差，通过补转小角度的动画修正，用户几乎感知不到差异，同时保证结果正确。

内容的提问来源于stack exchange，提问作者Faezeh Keshmiri