如何在没有 javascript 的情况下应用多个 CSS3 旋转变换（复合）？

Question

例如，假设我们有几个兄弟元素。使用 CSS sibling selectors，除了对前一个元素应用旋转之外，我们如何对每个后续元素应用 more 旋转？

好像需要指定origin of the transformation是之前转换的结果，但是不知道怎么办

Here's an attempt which obviously doesn't work.

 transform: rotate(5deg);

Answer 1

由于这些元素是兄弟元素，而不是彼此的子元素，因此每个元素的变换对其他元素没有影响。

遗憾的是，如果没有动态变量，您将无法使用 CSS 根据兄弟姐妹数量动态应用转换。 ，因此您将无法简单地为每个后续兄弟添加另一个转换。您将需要一个预处理器，例如 Sass 或 LESS 来为您生成静态 CSS。静态 CSS 看起来像这样：

.el + .el { transform: rotate(10deg); }
.el + .el + .el { transform: rotate(15deg); }

如果您不使用预处理器，则需要根据需要对这个 CSS 尽可能多的元素进行硬编码，或者使用 JavaScript 动态应用转换。

Answer 2

你不能单独使用 css 来完成它，除非使用像博尔特的答案这样的技术

考虑使用一些 javascript 库（less.js 非常适合您的这种特殊情况）