css - 2D Transforms Part 5: Combining Multiple Transforms

Multiple transforms can be combined to achieve complex visual effects.

Examples and Explanation

Combining Scale and Rotate

.scale-rotate {

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

}

Explanation: The element is scaled up and then rotated, applying both transformations in sequence.

Combining Translate and Skew

.translate-skew {

    transform: translate(30px, 20px) skew(10deg);

}

Explanation: The element is moved and then tilted for a dynamic appearance.

Animation with Multiple Transforms

.animate {

    animation: transformExample 2s infinite;

}

@keyframes transformExample {

    from {

        transform: translate(0, 0) rotate(0deg);

    }

    to {

        transform: translate(50px, 50px) rotate(360deg);

    }

}

Explanation: Combining transforms in animations creates interactive and visually engaging effects.

Use Case: Combining multiple transforms is essential for creating polished, modern UI elements and animations.