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

Could you not simply rotate the parent element, as the rotation is common amongst all divs? — joshnh, Jul 31 '12 at 03:08
@joshnh There can be many workarounds to this specific situation, but my question boils down to the efficiency problems caused by CSS properties that can take multiple functions that each do something different. Perhaps it could be better if these functions were split into separate properties... — Daniel W, Jul 31 '12 at 18:05

BoltClock · Accepted Answer · 2015-02-18T11:50:39.327

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

score 1 · Answer 2 · answered Jul 31 '12 at 06:34

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

score 0 · Answer 3 · edited May 23 '17 at 12:10

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.

Stacking CSS3 transform functions from multiple selectors in stylesheet

3 Answers3