Stacking CSS3 transform functions from multiple selectors in stylesheet

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