Home/ Questions/Q 9065699
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T16:34:15+00:00

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

  • 0

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).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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);
    • 0