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

Question

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

似乎有必要指定origin of the transformation是前一次转换的结果，但我不知道该怎么做。

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

 transform: rotate(5deg);

Answer 1

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

不幸的是，如果没有动态变量，您将无法使用CSS根据兄弟计数动态应用变换。 CSS doesn't support additive declarations，因此您无法为每个后续兄弟添加另一个转换。您将需要一个预处理器，如Sass或LESS，为您生成静态CSS。那个静态CSS看起来像这样：

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

如果您不使用预处理器，则需要根据需要对此CSS进行硬编码，或使用JavaScript动态应用变换。

Answer 2

除了使用像Bolt的回答

这样的技术之外，你无法单独使用css

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