How to apply multiple CSS3 rotation transformation

Question

For example, let's say we have several sibling elements. With CSS sibling selectors, how could we apply more rotation to each subsequent element in addition to the rotation applied to the previous one?

Seems it would be necessary to specify that the origin of the transformation is the result of the previous transformation, but I don't know how to do it.

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

 transform: rotate(5deg);

Answer 1

You cannot do it with css alone except using some technique like Bolt's answer

Consider using some javascript library (less.js would be perfect for your this particular case)

Answer 2

Since these elements are siblings, and not children of each other, each element's transform has no effect on the others.

Unfortunately, without dynamic variables, you will not be able to apply transforms dynamically based on the sibling count using CSS. CSS doesn't support additive declarations, so you will not be able to simply add another transform for every subsequent sibling. You will need a preprocessor such as Sass or LESS to generate the static CSS for you. That static CSS looks like this:

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

If you don't use a preprocessor, you will need to hardcode this CSS for as many elements as necessary, or use JavaScript to apply the transforms dynamically.