How to apply CSS3 transforms with keyframe animations ?

Question

How to apply more than one transform with CSS3 animation ?

Here is my HTML code :

<div class="container">
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
</div>

And my attempt :

@-webkit-keyframes firstanim{
    from{
        -webkit-transform:scale(1);
        -webkit-transform:rotate(0deg);
    backgroud:skyblue;
    left:0px;

    -webkit-transform: rotateY(0deg);
   }    to{
    -webkit-transform:rotate(360deg);
    -webkit-transform:scale(1.5);
    background:orange;
    left:100px;
    -webkit-transform: rotateY(360deg);
   }
}


.container{
    border:1px solid black;
    padding:20px;
    width:250px;
    height:50px;
    position:realtive;
}
.cell{
    width:25px;
    height:25px;

    background:skyblue;

    float:left;
    display:inline-block;
    margin:0px 5px;
    position:relative;
    -webkit-animation: firstanim 3s infinite;

}
.inner{
 width:100%;
 height:50%;
 float:left;

    border:1px solid white;
    border-left-width:0px;
    borer-right-width:0px;
}

The result is located here.

Only one transform is being applied to the elements, even if I add more.

Ana · Accepted Answer · 2012-09-28 12:12:58Z

5

If you write something like this:

transform: rotate(30deg);
transform: scale(3);

then the second one overrides the first one and your element is only scaled, not rotated.

In order to apply multiple transforms to a single element you need to chain them.

Example:

transform: rotate(30deg) scale(3) translateX(3em) skewY(60deg);

Also, the order in which you apply them matters and you may get different results depending on the chosen order - see this example, where the blue box doesn't have the same shape as the red one after applying the same two transforms, but in inverse order.

Your fiddle with chained transforms: http://jsfiddle.net/TBrf2/4/

edited Sep 28, 2012 at 12:12

answered Sep 28, 2012 at 11:51

Ana

37.6k7 gold badges88 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kongaraju · Accepted Answer · 2012-09-28 11:56:00Z

2

Here is fiddle demo working with multiple transforms.

-webkit-transform:scale(1)  rotateY(0deg);

you need to apply like this.

answered Sep 28, 2012 at 11:56

kongaraju

9,66511 gold badges59 silver badges79 bronze badges

2 Comments

Chris Over a year ago

Please don't post an answer that's identical to another answer, especially if the other answer is more detailed. It doesn't add any contribution.

kongaraju Over a year ago

sorry! I didnt saw the answer due to upadating fiddle

Collectives™ on Stack Overflow

How to apply CSS3 transforms with keyframe animations ?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related