How to apply multiple CSS3 rotation transformations (compounded) without javascript?


Tags: css,css3,css-transforms

Problem :

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);


Solution :

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.


    CSS Howto..

    How to add a margin to a paragraph?

    How to apply css to 'text' and 'password' together [closed]

    CSS how to vertical align div in a div against a sibling div (inline-block)

    How do I tell CSS to recalculate :first-of-type after DOM dynamically changes?

    How to center a button WITHOUT a div using CSS

    How To Restrict Width of Bootstrap 3 Dropdown-Menu in Navbar

    How to auto adjust margin to Auto center vertical & horizontal using jQuery and CSS margin

    How to make HTML pages print at a consistent size from Chrome?

    Images not showing up in IE 9

    How to insert a line break before an element using CSS

    How can I achieve the mouseover effect like on wikipedia?

    How to make font size independent of screen resolution and monitor size?

    How to force a hover state with jQuery?

    How To Left Align the Title Using CSS

    How to set shadow on top of a CSS border?

    Trying to highlight table row using JQuery but not working, can anyone tell me why and how to fix it?

    How to disable and enable css rule

    How to place background image behind page content?

    How to override inline css from external class?

    Hover img to show an absolutely positioned div isn't working

    How to create a horizontal navigation in HTML/CSS above an image?

    Jquery/CSS - how to clear a CSS-background set in another file I can't edit

    How to show a notification bar on Top after n seconds with transition from top to down?

    How to divide parent div's height between child divs

    How does the padding work in responsive CSS square?

    How can I make a fade in function without using jQuery like this? (JavaScript)

    Hiding and showing web element with CSS in dart?

    How to keep sub div from considering height of its cousin?

    How i can remove gap between Menu Box

    How to make image previews (thumbnails) using html/css