越来越多地旋转元素答案

【问题标题】：Rotate elements by an increasing amount越来越多地旋转元素
【发布时间】：2015-03-15 05:03:45
【问题描述】：

我有任意数量的<div> 元素。我希望每个 <div> 旋转，但增加 2 度。这应该怎么做？我不确定是否可以仅在 CSS 中使用，

例如：

div:nth-child(1) {
  rotate(0deg);
}
div:nth-child(2) {
  transform: rotate(2deg);
}
div:nth-child(3) {
  transform: rotate(4deg);
}

...
// Here is the general equation, but I can't use it in CSS.
div:nth-child(n) {
  transform: rotate( 2*n );
}

【问题讨论】：

考虑使用 sass？
是的 - 目前正在使用 sass，你在想什么？（我很擅长混合和变量 - 但仍然不确定其他东西的限制在哪里
@cimmanon - 尝试对上面的 CSS 进行硬编码。鉴于我的知识（在这篇文章之前），在 CSS 中没有什么可以尝试的。老实说，我没有意识到 SASS 可以用于循环或控制结构。
我的回答成功了吗？请提供反馈
@Cimmanon - 你的粗鲁也没有任何借口。

标签： css sass css-animations

【解决方案1】：

试试这个：

$qty: 40;//number of childs
$step:  $qty *2 ;

@for $i from 0 through $qty - 1 {
div:nth-child(#{$i + 1}) {
    transform: rotate( $step+deg) ;
  }
}

also check this

【讨论】：

【解决方案2】：

由于子元素可以相对于其父元素定位，您可以使用以下方法增加它们：

 .parent div{
    transform:rotate(2deg);
 }

演示

div {
  height: 200px;
  width: 200px;
  background: rgba(0, 0, 0, 0.2);
}
.parent div {
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  transform: rotate(2deg);
}

<div class="parent">
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      <div></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

是的，任意数量的 sibling 元素，而不是嵌套元素。
对于 CSS/Sass 问题，除非绝对没有其他方法可以解决该问题，否则您不应只建议修改标记。您为纯粹的风格目的添加了过多的额外标记，这非常糟糕。建议添加 179 个额外元素以将元素旋转 -2 度（或 358 度，但你更喜欢看它），你怎么感觉不坏？
@cimmanon：OP 没有要求“添加 179 个额外元素” - 我认为你把这完全不成比例。他们没有说明他们希望使用多少元素。与之前的 div 相比，他们希望添加一个轮换。 正是这样做的。我把它用作demo。因此，除非您有其他方法，这意味着他们可以完全按照他们的意愿去做，我相信这种方法对于这个功能来说很好。 OP 没有要求将元素旋转 -2 度，所以请向我解释一下这种方法到底是什么不起作用。
other 的答案也“正是如此”。这里的不同之处在于他们没有建议修改标记。鉴于它们将元素旋转 2 度，可以安全地假设最大变化数为 180 (360 / 2)。据我所知，它们总共可以有 360 个元素。在我看来，建议使用标记来做到这一点是疏忽大意的。
感谢@jbutler483 的回答 - 感谢您的帮助。 Cimmanon 说得对，这效率低下，他只是用一种非常粗鲁的方式来写它。不管你的仍然是一个解决方案。