How to transform background image using CSS3 ?
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:
Contact Us