css - 同时旋转多个元素

Question

我有元素列表 (li)，这些元素使用变换以圆形堆叠。元素根据其在圆圈中的初始位置具有不同的 Angular :

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

最后一个负向旋转是逆时针旋转以保持元素处于向上位置。翻译Y是半径偏移。

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

执行此操作的最佳方法是什么？寻找一些聪明的方法.. 所有元素当然应该同时旋转 - 就像旧手机上的拨号器一样。

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>