Applying multiple transformations in CSS

Current Location：Home > Learning > WEB FRONT-END > CSS >

Vue React JavaScript Angular CSS HTML

Applying multiple transformations in CSS

Author：JIYIK Last Updated：2025/04/19 Views：

CSS transforms are a powerful but underutilized way to add animation effects to elements. However, it can be tricky to get the desired results when applying multiple transformations at once; for example, we want elements to transform in sync when they overlap.

This article will explore how to apply multiple transformations in CSS.

Apply multiple transformations by specifying multiple transformation values in CSS

There are many ways to use multiple CSS transitions. We will discuss them in the following sections.

One way to apply multiple CSS transforms is to use the shorthand transform property. This property can take multiple values, separated by spaces.

For example:

transform: rotate(45deg) scale(2);

This line will rotate the element 45 degrees and then double its size.

As another example, if you wanted to rotate an element 30 degrees and then translate it 50 pixels, you would use the following code:

transform: rotate(30deg) translate(50px);

This line can be a valuable technique for creating complex animations and interactions.

Now let's see some examples of multiple transformations. You can use the following code to transform an image.

Sample code:

<!DOCTYPE html>
<html>
    <head>
        <title>Title of the document</title>
        <style>
            body {
                margin: 10px;
            }
            .box {
                background: url("/img/DelftStack/logo.png")
                    no-repeat;
                background-size: cover;
                height: 100px;
                width: 600px;
                border: 2px solid #000000;
                transform: rotate(110deg) translate(45px, -160px);
            }
            h1 {
                color: #000000;
            }
        </style>
    </head>
    <body>
        <h1>
            CSS Multiple transforms
        </h1>
        <strong>
            How to apply multiple transforms in CSS?
        </strong>
        <div class="box"></div>
    </body>
</html>

In the code above, we have used the CSS function transform: rotate(110deg) translate(45px, -160px)to transform the image. This CSS code will rotate the image 110 degrees.

So by using the above code you can apply it to convert any image.

Apply multiple transforms by specifying them in CSS

Another way to use multiple transformations is to specify each transformation individually.

For example:

transform: rotate(45deg);

transform: scale(2);

Applying multiple transforms by specifying multiple transform origins in CSS

You can also change the origin of the transform using the transform-origin property. For example:

transform-origin: 50% 50%;

transform-origin: bottom right;

This changes the origin to the center of the element or the bottom-right corner of the component.

Applying multiple transitions using nested classes in CSS

There is another way to apply CSS transformations. Below is one CSS code, but we will create two nested classes, outer-transform and inner-transform, to apply multiple CSS transformations.

This code will also give us the desired output.

Sample code:

<!DOCTYPE html>
<html>
    <head>
        <title>Title of the document</title>
        <style>
            h1 {
                color: #000000;
            }
            .outer-transform {
                transform: translate(150px, 180px);
            }
            .inner-transform {
                background: url("/img/DelftStack/logo.png")
                    no-repeat;
                background-size: cover;
                height: 100px;
                width: 600px;
                border: 2px solid #000000;
                transform: rotate(-150deg);
            }
        </style>
    </head>
    <body>
        <h1>
            CSS multiple transforms
        </h1>
        <strong>
            How to apply multiple transforms in CSS?
        </strong>
        <div class="outer-transform">
            <div class="inner-transform"></div>
        </div>
    </body>
</html>

Output:

CSS Multiple Transitions Using Nested Classes

Summarize

We are happy to inform you that you can apply multiple transformations to an element in CSS. You can have a div rotate and translate at the same time, or even have an element rotate and translate in different directions.

Transitions are a powerful tool for creating visual effects on HTML elements. CSS supports multiple transforms, allowing for a wider range of effects.

When used together, transforms can create some truly stunning visual effects.

Previous：Rotating text using CSS

Next：Overriding Bootstrap CSS

For reprinting, please send an email to 1244347461@qq.com for approval. After obtaining the author's consent, kindly include the source as a link.

Article URL：

JIYIK CN >