How to remove applied CSS transformation ?

Last Updated : 10 May, 2023

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: Here is the basic use of the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- jquery cdn -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </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:

Example 2: Here is another example of the above approach.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- jquery cdn -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </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>