使用transform: rotate()旋转内容时位置偏移问题求助

嘿，我来帮你解决这个轮盘旋转后内容位置不一致的问题！

问题根源分析 #

你遇到的核心问题有两个：

1. 双重旋转叠加：每个.item自身已经设置了rotate()变换，同时父元素.wheel也在旋转，导致内容的实际旋转角度是两者的叠加，位置和文字方向都彻底混乱了。
2. 旋转原点与定位错误：.wheel设置了left: -350px，让它的旋转原点不在容器中心，再加上每个.item用固定的left/bottom定位，当父元素旋转后，坐标系跟着旋转，item的定位就会完全偏离预期位置。

解决方案 #

我们需要重构布局和逻辑，让轮盘围绕中心精准旋转，同时每个item的内容始终保持正向，切换后位置完全统一：

修复后的HTML

<div id="page">
  <div class="wheel-wrp">
    <div class="wheel">
      <div class="item item-one">
        <div class="item-content">
          <h4>Project 1 - beautifully crafted digital brand</h4>
          <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
        </div>
      </div>
      <div class="item item-two">
        <div class="item-content">
          <h4>Project 2 - redefining technological boundaries</h4>
          <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
        </div>
      </div>
      <div class="item item-three">
        <div class="item-content">
          <h4>Project 3 - Beauty in Design</h4>
          <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
        </div>
      </div>
      <div class="item item-four">
        <div class="item-content">
          <h4>Project 4 - simply stunning </h4>
          <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="next">Next</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

修复后的CSS

.wheel-wrp {
  position: relative;
  height: 700px;
  width: 700px;
  margin: 0 auto;
  overflow: hidden;
}
.wheel {
  height: 700px;
  width: 700px;
  transition: transform 0.75s ease;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  transform-origin: center center; /* 强制旋转原点为轮盘中心 */
}
.item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.item-active {
  opacity: 1;
}
/* 让每个item围绕轮盘中心旋转到对应圆周位置 */
.item-one {
  transform: translate(-50%, -50%) rotate(0deg) translate(350px, 0);
}
.item-two {
  transform: translate(-50%, -50%) rotate(90deg) translate(350px, 0);
}
.item-three {
  transform: translate(-50%, -50%) rotate(180deg) translate(350px, 0);
}
.item-four {
  transform: translate(-50%, -50%) rotate(270deg) translate(350px, 0);
}
/* 反向旋转内容，确保文字始终正向显示 */
.item-one .item-content { transform: rotate(0deg); }
.item-two .item-content { transform: rotate(-90deg); }
.item-three .item-content { transform: rotate(-180deg); }
.item-four .item-content { transform: rotate(-270deg); }

.next {
  margin-top: 20px;
  padding: 10px 20px;
  cursor: pointer;
  background: #eee;
  display: inline-block;
}

.fadeOut {
  animation: fadeOut 0.4s forwards;
}
.fadeIn {
  animation: fadeIn 0.4s forwards;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

修复后的JS

$(function() {
  var degree = 0;
  var items = $('.wheel .item');
  var currentIndex = 0;
  
  // 初始化激活第一个item
  items.eq(currentIndex).addClass('item-active');
  
  $('.next').click(function() {
    var wheel = $('.wheel');
    // 轮盘精准旋转90度
    degree += 90;
    wheel.css('transform', 'rotate(' + degree + 'deg)');
    
    // 隐藏当前激活项
    items.eq(currentIndex).addClass('fadeOut');
    
    // 更新索引，循环切换
    currentIndex = (currentIndex + 1) % items.length;
    
    // 延迟切换显示下一项，配合动画节奏
    setTimeout(function() {
      items.removeClass('item-active fadeOut fadeIn');
      items.eq(currentIndex).addClass('item-active fadeIn');
    }, 375);
  });
});

关键改进点 #

• 统一旋转原点：.wheel设置transform-origin: center center，确保轮盘始终围绕自身中心旋转，不会出现偏移。
• item定位重构：所有item都基于轮盘中心定位，通过rotate()+translate()分布到圆周，彻底避免父元素旋转后定位混乱的问题。
• 内容正向保持：每个item内部的.item-content反向旋转，抵消item的旋转角度，让文字始终保持正向显示。
• 简化逻辑：用索引循环切换item，替代复杂的prev/next元素查找，逻辑更清晰可靠，不易出错。

这样修改后，每次点击Next按钮，轮盘都会精准旋转90度，切换后的内容始终处于同一显示位置，完美符合你的需求！

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