CODEWITHSUNDEEP
csscss-transforms
Daniel W
Daniel W

Reputation: 527

Stacking CSS3 transform functions from multiple selectors in stylesheet

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

Upvotes: 18

Views: 17718

Answers (3)

BoltClock
BoltClock

Reputation: 723528

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

Upvotes: 21

Christofer Vilander
Christofer Vilander

Reputation: 18022

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

Upvotes: 1

ScottS
ScottS

Reputation: 72261

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.

Upvotes: 0

Related Questions