How to transform background image using CSS3 ?

Last Updated : 10 May, 2023

In this article we will learn how to transform a background image using CSS3, The transform property in CSS is used to transform the background image. In

Approach: The CSS transform property is used to apply the two-dimensional or three-dimensional transformation to an element. The transform property is used to rotate, scale, and skew an element.

Syntax:

.class_name { transform: value };

Note: Add the overflow: hidden to the parent component with transform property to avoid the overlapping effect.

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div.parent {
            margin-top: 15%;
            margin-left: 10%;
        }
 
        .child {
            /* transform image 50 degree */
            transform: rotate(50deg);
        }
    </style>
</head>
 
<body>
    <div class="parent">
        <div>
            <img src=
"gfg_complete_logo_2x-min.png"
                 class="child">
        </div>
    </div>
</body>
</html>