Как применить несколько преобразований вращения CSS3 (усугубляется) без javascript?

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, поэтому вы не сможете просто добавить другое преобразование для каждого последующего брата. Для создания статического CSS вам понадобится препроцессор, такой как Sass или LESS. Это статический CSS выглядит следующим образом:

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

Если вы не используете препроцессор, вам нужно будет жёстко этого CSS для количества элементов по мере необходимости, или применять преобразования динамически использовать JavaScript.

Answer 2

Вы не можете сделать это с помощью CSS в одиночку, за исключением использования какой-то метод, как ответ Болта

Рассмотрим с помощью некоторых библиотеку JavaScript (less.js был бы идеальным для этого конкретного случая)