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 >
|
Output:
Before transforming the background image:
After transforming the background image:
Share your thoughts in the comments
Please Login to comment...