CODEWITHSUNDEEP
htmlcsscss-transforms
naoufelabs
naoufelabs

Reputation: 133

How to perform multiple 2D transformations?

I want to allow multiple transformations (Rotate, translate, etc...) all at once for a div element.

I can't seem to do this, as only one transformation is applied (The first one), using the following code:

<!DOCTYPE html>
<html>
    <head>
    <style> 
        div {
            width:100px;
            height:75px;
            background-color:#FFCC00;
            border:1px solid black;
        }

        div#div2 {
            transform:rotate(45deg);
            -ms-transform:rotate(45deg); /* IE 9 */
            -moz-transform:rotate(45deg); /* Firefox */      
            -webkit-transform:translate(50px,100px); /* Safari and Chrome */
            -webkit-transform:rotate(45deg); /* Safari and Chrome */
            -o-transform:rotate(45deg); /* Opera */
        }

    </style>
    </head>
<body>
    <div>This is a DIV element.</div>
    <div id="div2">This is a DIV element + Transformation</div>
</body>
</html>

Tested on Chrome, only the rotation is affected, and the translation has no effect even if it's located first (before the rotation).

Upvotes: 3

Views: 1329

Answers (2)

Eliran Malka
Eliran Malka

Reputation: 16263

The formal grammar for transform is:

transform: <transform-function> [<transform-function>]* | none

In order to execute several transforms, you'd have to concatenate the transform functions:

-webkit-transform: translate(50px,100px) rotate(45deg);
-moz-transform: translate(50px,100px) rotate(45deg);
-ms-transform: translate(50px,100px) rotate(45deg);
-o-transform: translate(50px,100px) rotate(45deg);
transform: translate(50px,100px) rotate(45deg);

Here's a live demo on jsFiddle, based on your code.

Further reading

Upvotes: 2

Sam
Sam

Reputation: 7858

Attributes are unique and don't work like sequential calls to functions, they just override a preceding definition. So you need to do the transform in one shot, like this (tested in Firefox 17):

transform:rotate(45deg) translate(50px,100px);

Upvotes: 1

Related Questions