How to apply multiple transform property to an element using CSS ?

There is a variety of procedures to apply multiple transform property in an element. In this article we will discuss the easiest and popular ones. In the 1st method we will be combining the transform property itself. In the 2nd method, we will use the nested classes to apply other transforms.

Method 1: In this method, we will combine the transform property. 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. This is important as changing the order of the values would change the overall result of the property.

  • Example: In this example we will apply both the transform property on the loaded image, one will rotate the image and another one will shift the image.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            body {
                margin: 20px;
            }
              
            .box {
                background: url(
                  no-repeat;
                background-size: cover;
                height: 100px;
                width: 400px;
                border: 2px solid black;
                
                /* The transformations are 
                   applied from right to left */
                transform: rotate(90deg) 
                           translate(150px, -230px);
            }
              
            h1 {
                color: green;
            }
        </style>
    </head>
      
    <body>
        <h1>
            GeeksforGeeks
        </h1>
        <b>
            How to apply multiple transforms in CSS?
        </b>
        <p>
            The "box" class has both the rotate() and
            translate() transformations applied.
        </p>
        <div class="box"></div>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

Method 2: Here we are using nested classes to apply other transforms. This method works by nesting one element with a certain transform with another one with another transform. This can be repeated with multiple nesting of elements to apply multiple transforms. The topmost element, that is the parent of the nested elements would be applied first and then subsequently each of the children’s transforms would be applied next.

  • Example: In this example, we will apply both the transform property on the loaded image one will rotate the image and another one will shift the image.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            .outer-transform {
                
                /* This transformation
                   will be applied first */
                transform: translate(-150px, 150px);
            }
              
            .inner-transform {
                background: url(
                  no-repeat;
                background-size: cover;
                height: 100px;
                width: 400px;
                border: 2px solid black;
                
                /* This transformation
                   would be applied next */
                transform: rotate(-90deg);
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <b>
            How to apply multiple transforms in CSS?
        </b>    
        <p>
            The inner element has the rotate() transformation and
            <br> the outer element has the translate() transformation
             applied.
        </p>
        <div class="outer-transform">
            <div class="inner-transform"></div>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.