En este artículo, aprenderemos cómo eliminar la transformación CSS aplicada. La propiedad de transformación CSS se utiliza para aplicar una transformación bidimensional o tridimensional a un elemento. Esta propiedad se puede usar para rotar, escalar, mover o incluso sesgar un elemento.
Sintaxis:
transform: value;
Para eliminar la transformación CSS aplicada, usaremos JavaScript. Usando JavaScript cuando hacemos clic en el botón Eliminará esa clase del elemento. A continuación se muestra la implementación completa del enfoque anterior.
Ejemplo 1
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>
Producción:
-
Antes de hacer clic en el botón:
-
Después de hacer clic en el botón:
Ejemplo 2:
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>
Producción:
-
Antes de hacer clic en el botón:
-
Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por nikhilchhipa9 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA