同时旋转多个元素

Question

我有使用转换堆叠成圆形的项目列表 (li)。项目根据其在圆圈中的初始位置具有不同的角度：

• 变换：旋转(0deg) translateY(-75px) 旋转(-0deg)
• 变换：旋转(45deg) translateY(-75px) 旋转(-45deg)
• ...等

最后一个负旋转是逆时针旋转以保持元素在向上的位置。 translate Y 是半径偏移量。

我想要完成的是将所有项目旋转不同的度数，或者假设如果一个项目被点击，我希望所有项目都旋转，以便被点击的项目将位于顶部位置 (0deg)。

最好的方法是什么？寻找一些聪明的方法。所有项目当然应该同时旋转 - 就像旧手机上的拨号器一样。

Answer 1

使用一些 jQuery，您可以更改容器的类并将旋转值分配给容器：

fiddle

$('.one').click(function() {
  $('#container').removeClass('second third fourth').addClass('first');
});
$('.two').click(function() {
  $('#container').removeClass('first third fourth').addClass('second');
});
$('.three').click(function() {
  $('#container').removeClass('first second fourth').addClass('third');
});
$('.four').click(function() {
  $('#container').removeClass('first second third').addClass('fourth');
});

#container {
  position: relative;
  width: 30%;
  padding-bottom: 30%;
  margin: 10% auto;
  transition: transform .5s ease-out;
}
.elt {
  position: absolute;
  padding: 2%;
  background: teal;
  cursor: pointer;
  transition: transform .5s ease-out;
}
.one { top: 0; left: 47.5%; }
.two { top: 47.5%; right: 0; }
.three { bottom: 0; left: 47.5%; }
.four { top: 47.5%; left: 0; }
#container.first { transform: rotate(0deg); }
#container.first div { transform: rotate(0deg); }
#container.second { transform: rotate(-90deg); }
#container.second div { transform: rotate(90deg); }
#container.third { transform: rotate(180deg); }
#container.third div { transform: rotate(-180deg); }
#container.fourth { transform: rotate(90deg); }
#container.fourth div { transform: rotate(-90deg); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="elt one">1</div>
  <div class="elt two">2</div>
  <div class="elt three">3</div>
  <div class="elt four">4</div>
</div>