How to Apply Multiple Transforms in CSS

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

In the example below, 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.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Use the <h1> and <strong> tags for the heading and bold content, respectively.
  • Add a <div> with a class name "box".
<h1> 
  W3Docs
</h1>
<strong> 
 How to apply multiple transforms in CSS? 
</strong>
<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>
  <head>
    <title>Title of the document</title>
    <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>
    <strong> 
      How to apply multiple transforms in CSS? 
    </strong>
    <div class="box"></div>
  </body>
</html>

Result

How to apply multiple transforms in CSS?

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>
  <head>
    <title>Title of the document</title>
    <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>
    <strong> 
      How to apply multiple transforms in CSS? 
    </strong>
    <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.

How to apply the same transformation again?

It is possible to apply the same transformation to an element again after it has been transformed. You can achieve this using CSS transitions or animations.

Here's an example of how you can use CSS transitions to rotate an element back and forth between 180deg and 90deg when the user hovers over it:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        margin: 50px auto;
        transform: rotate(180deg);
        transition: transform 0.5s ease;
        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: 200px;
        width: 200px;
        border: 2px solid #000000;
        transform: rotate(-150deg);
      }

      .box:hover {
        transform: rotate(90deg);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

In this example, the .box div element is initially rotated 180deg using the transform property. We've also added a CSS transition property to specify that any changes to the transform property should be animated over a duration of 0.5 seconds with an ease-in-out timing function.

When the user hovers over the .box element, the transform property is changed to rotate the element 90deg. Since we've defined a transition for the transform property, the rotation is animated smoothly over the specified duration.

You can modify this example to achieve different rotation angles and animation timings as per your requirement.