Stacking CSS3 transform functions from multiple selectors in stylesheet - css

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 independently:
.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 the rotating and the moving use the transform property, so the moving overrides the rotating. Is it possible to make the values stack together instead of overriding each other?
Notes:
I will be using complex transform functions, not merely simple translations, so I cannot substitute them with just left and top properties.
I have many DIVs, so it is much more efficient to select all of them and apply their common properties, before assigning their individual properties.
Reference: jsFiddle

Answer 1

Unfortunately, due to how the syntax and the cascade work, you won't be able to stack transforms as described. You will have to redeclare the rotations before the 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 about using keyframes?
Demo: jsFiddle
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 state, "I have many DIVs, so it is much more efficient to select all of them and apply their common properties, before assigning their individual properties." It may be more efficient for you coding, but unfortunately not for the results. The only way is to do them all in a single call (as BoltClock just beat me to posting).
To regain efficiency, look at using LESS or SCSS preprocessing. Another answer to a recent question regarding setting up LESS for multiple transitions may be helpful to you.