Styling CSS3 functions to convert from multiple selectors to a style sheet

Question

Let's say I have 2 DIVs:

​<div class="div1"></div> <div class="div2"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

I want to rotate both of them:

 div { position: absolute; width: 100px; height: 100px; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); } 

And then I want to move them myself:

 .div1 { background-color: red; -webkit-transform: translate(100px,0px); -moz-transform: translate(100px,0px); } .div2 { background-color: green; -webkit-transform: translate(0px,100px); -moz-transform: translate(0px,100px); }​ 

The problem is that both rotating and moving use the transform property, so moving overrides the rotation. Is it possible to combine values ​​with each other and not override each other?

Notes:
I will use complex conversion functions, not just simple translations, so I can not replace them only with the left and top properties.
I have many DIVs, so it’s much more efficient to select all of them and apply their common properties before assigning their individual properties.

Link: jsFiddle

Answer 1

Unfortunately, due to how the syntax and cascade work, you will not be able to convert the stack as described. You will have to redefine the rotation before translations:

 .div1 { background-color: red; -webkit-transform: rotate(30deg) translate(100px,0px); -moz-transform: rotate(30deg) translate(100px,0px); } .div2 { background-color: green; -webkit-transform: rotate(30deg) translate(0px,100px); -moz-transform: rotate(30deg) translate(0px,100px); }​ 

Answer 2

How to use keyframes?

Demo: jsFiddle

The code:

 .div1 { background-color: red; -webkit-animation: divone 2.0s ease-in-out forwards; -webkit-animation-iteration-count: 1; -webkit-animation-delay: 1.0s; } .div2 { background-color: green; -webkit-animation: divtwo 2.0s ease-in-out forwards; -webkit-animation-iteration-count: 1; -webkit-animation-delay: 1.0s; } @-webkit-keyframes divone { 0% {-webkit-transform: rotate(0deg);} 50% {-webkit-transform: rotate(30deg);} 100% {-webkit-transform: rotate(30deg) translate(100px,0px);} } @-webkit-keyframes divtwo { 0% {-webkit-transform: rotate(0deg);} 50% {-webkit-transform: rotate(30deg);} 100% {-webkit-transform: rotate(30deg) translate(0px,100px);} } 

Answer 3

You declare: "I have many DIVs, so it’s much more efficient to select all of them and apply their general properties before assigning their individual properties." This may be more efficient coding for you, but, unfortunately, not for the results. The only way is to do it all in one call (since BoltClock just beat me before posting).

To regain efficiency, see LESS or SCSS for preprocessing. Another answer to a recent question regarding setting up LESS for multiple transitions may be useful to you.