Skip to content
Related Articles

Related Articles

How to transform background image using CSS3 ?
  • Difficulty Level : Medium
  • Last Updated : 22 Mar, 2021

The transform property in CSS is used to transform the background image. In this article, the task is to transform the background image.

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:



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 transform the background image:

  • After transform the background image:

My Personal Notes arrow_drop_up
Recommended Articles
Page :