Question

我有使用转换在圆圈中堆叠的项目列表（li）。项目的角度取决于其在圆圈中的初始位置：

transform：rotate（0deg）translateY（-75px）rotate（-0deg）
transform：rotate（45deg）translateY（-75px）rotate（-45deg）
...... etc

最后一个负向旋转是旋转ccw以保持元素处于向上位置。 translate Y是半径偏移。

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

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

Answer 1

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

$('.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>

同时旋转多个元素

1 个答案: