En CSS dinámico, puede cambiar el tamaño del radio de rotación utilizando las propiedades personalizadas de CSS (variables). Como las propiedades personalizadas se encuentran ahora en los navegadores más recientes de Mozilla, Google, Opera, Apple y Microsoft, definitivamente es un buen momento para explorar y experimentar.
Los requisitos previos para aprender las variables CSS y la función CSS var() .
Acercarse:
- Primero, define una propiedad personalizada global denominada “–radius” .
- Luego use la función calc() para calcular el valor «-radius» que es 45 grados. Aquí, también puede usar cualquier otra variable definida para calcular el radio según sus necesidades.
- Se puede utilizar para cambiar el tamaño del radio de rotación.
- Luego usa la función var() para insertar el valor de la propiedad personalizada para rotar el objeto.
Nota: puede actualizar una variable CSS con JavaScript.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
#box {
background-color: #029919;
width: 200px;
height: 200px;
margin: 10px;
transition: transform 1s linear;
transform-origin: bottom left;
}
:root {
--radius: calc(10 * 4.5deg);
}
.box-rotate {
transform: rotate(var(--radius));
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksForGeeks
</h1>
<button onclick="rotate()">click me</button>
<div id="box"></div>
<!-- Script to add functionality
on button -->
<script>
function rotate() {
var element = document.getElementById("box");
element.classList.toggle("box-rotate");
}
</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 raktim_banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA