How to Apply Multiple Transforms in CSS

There are many ways to apply multiple transforms in CSS. In this snippet, we’ll show how to achieve this using multiple values of the transform property, as well as using nested classes.

In the following example, we’ll use multiple values of the transform property. It is possible to add multiple values applied one after another. The values must be separated by space. The transform property applies the rightmost value, and then the values on the left. In other words, the last value of the list will be applied first. That’s why changing the value order will affect the final result.

Let’s see how to apply it step by step.

Create HTML

  • Use the <h1> and <b> tags for the heading and bold content, respectively.
  • Add a <div> with a class name “box”.
<h1> 
  W3Docs
</h1>
<b> 
How to apply multiple transforms in CSS? 
</b> 
<div class="box"></div>

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.
body {
  margin: 10px;
}

.box {
  background: url("https://images.unsplash.com/photo-1507919909716-c8262e491cde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60") no-repeat;
  background-size: cover;
  height: 90px;
  width: 300px;
  border: 2px solid #000000;
  transform: rotate(90deg) translate(150px, -230px);
}

h1 {
  color: #000000;
}

Here is the full code.

Example of applying multiple transform values:

<!DOCTYPE html> 
<html>
  <title>Title of the document</title>
  <head>
    <style> 
      body { 
      margin: 10px; 
      } 
      .box { 
      background: url( 
      "https://images.unsplash.com/photo-1507919909716-c8262e491cde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60") 
      no-repeat; 
      background-size: cover; 
      height: 90px; 
      width: 300px; 
      border: 2px solid #000000;   
      transform: rotate(110deg)  
      translate(150px, -230px); 
      } 
      h1 { 
      color: #000000; 
      } 
    </style>
  </head>
  <body>
    <h1> 
      W3Docs
    </h1>
    <b> 
    How to apply multiple transforms in CSS? 
    </b> 
    <div class="box"></div>
  </body>
</html>

In the example mentioned above, we applied the transform property on the loaded image. The "rotate" value rotated the image, and the "translate" shifted the image.

Let’s see how we can have the same effect using nested classes. In this case, we need to nest one element with a specified transform with another element having another transform. To apply multiple transforms, this can be repeated with multiple nesting of elements. First would be applied the parent of the nested element. Then, subsequently, each of the children element’s transforms would be applied next.

Example of applying multiple transforms using nested classes:

<!DOCTYPE html> 
<html>
  <title>Title of the document</title>
  <head>
    <style> 
      h1{
      color: #000000;
      }
      .outer-transform { 
      transform: translate(150px, 180px); 
      } 
      .inner-transform { 
      background: url( 
      "https://images.unsplash.com/photo-1507919909716-c8262e491cde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60") no-repeat;  
      background-size: cover; 
      height: 100px; 
      width: 400px; 
      border: 2px solid #000000; 
      transform: rotate(-150deg); 
      } 
    </style>
  </head>
  <body>
    <h1> 
      W3Docs
    </h1>
    <b> 
    How to apply multiple transforms in CSS? 
    </b>     
    <div class="outer-transform">
      <div class="inner-transform"></div>
    </div>
  </body>
</html>

Here, we applied the rotate() transformation for the inner element and the translate() transformation for the outer element.


Do you find this helpful?

Related articles