css - 如何在没有 javascript 的情况下应用多个 CSS3 旋转转换(复合)？

Question

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

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

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

 transform: rotate(5deg);

Answer 1

因为这些元素是 sibling ，而不是彼此的子元素，所以每个元素的变换对其他元素没有影响。

不幸的是，如果没有动态变量，您将无法使用 CSS 根据 sibling 数量动态应用转换。 CSS doesn't support additive declarations ，因此您将无法简单地为每个后续兄弟添加另一个转换。您将需要一个预处理器，例如 Sass 或 LESS 来为您生成静态 CSS。该静态 CSS 如下所示:

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

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