Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 543
Daniel W Avatar asked Jul 31 '12 02:07

Daniel W


People also ask

Can you have multiple transforms CSS?

The transform property can be given multiple values that are applied one after another. It applies the rightmost value and then the ones on the left, which means that the value which is last in the list would be applied first.

How do I use more than one transform in CSS?

Add CSS. Use a loaded image for the background property and specify the width, height, and border properties. Add the transform property with two of its values: rotate and translate.

What is the function used to combine all the transformation methods together?

The matrix transform function can be used to combine all transforms into one.

What is CSS WebKit transform?

The -webkit-transform-2d Boolean CSS media feature is a WebKit extension whose value is true if vendor-prefixed CSS 2D transform s and non-standard vendor-prefixed media queries are supported. Apple has a description in Safari CSS Reference.


2 Answers

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);
}​
like image 147
BoltClock Avatar answered Nov 27 '22 07:11

BoltClock


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);}
} 
like image 38
Christofer Vilander Avatar answered Nov 27 '22 06:11

Christofer Vilander