Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to remove applied CSS transformation ?

  • Last Updated : 31 Mar, 2021

In this article, we will learn How to remove applied CSS transformation. The CSS transform property is used to apply a two-dimensional or three-dimensional transformation to an element. This property can be used to rotate, scale, move or even skew an element.

Syntax:

transform: value;

To remove applied CSS transformation we will use JavaScript. Using JavaScript when we click on the button It will remove that class from the element. Below is the full implementation of the above approach.

Example:1

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
  <!-- jquery cdn -->
  <script src=
  </script>
  <style>
    .parent {
      background-color: yellow;
      margin: 5% auto;
    }
    /* Transition applied */
    .transition_apply {
      transform: rotateY(180deg);
    }
  </style>
</head>
  
<body>
  <div class="parent">
    <h1 class="transition_apply">
      GeeksforGeeks
    </h1>
  
    <button class="element">
      Click me
    </button>
  </div>
  
  <script>
    // When click on button this function is involked
    $(".element").on("click", function () {
  
      // If class is transition_apply then 
      if ($(".transition_apply").hasClass("transition_apply")) {
          
        // remove this class to remove transition
        $(".transition_apply").removeClass("transition_apply");
      }
    });
  </script>
</body>
  
</html>

Output:



  • Before clicking on the button:

  • After clicking on the button:

Example 2:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
  <!-- jquery cdn -->
  <script src=
  </script>
  
  <style>
    .parent {
      background-color: yellow;
      margin: 5% auto;
      color: green;
    }
    /* Transition applied rotate in x-axis */
    .transition_apply {
      transform: rotateX(-180deg);
    }
  </style>
</head>
  
<body>
  <div class="parent">
    <h1 class="gfg">
      GeeksforGeeks
    </h1>
    <button class="element">
      Click me
    </button>
  </div>
  
  <script>
    // When click on button this function is involked
    $(".element").on("click", function () {
  
      // If class is transition_apply then 
      if ($(".transition_apply").hasClass("transition_apply")) {
          
        // remove this class to remove transition
        $(".transition_apply").removeClass("transition_apply");
      }
      else{
        // Add class
        $(".gfg").addClass("transition_apply");
      }
    });
  </script>
</body>
  
</html>

Output:

  • Before clicking on the button:

  • After clicking on the button:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!