La función de rotación () de CSS distorsiona un elemento en un cierto número de grados. Puede rotar un elemento en el sentido de las agujas del reloj utilizando un número positivo de grados. O puede rotar un elemento en sentido antihorario usando un número negativo.
Hoy vamos a aprender cómo rotar elementos con CSS. ¿Por qué rotar un elemento? Los elementos giratorios hacen que su página web sea más interactiva. Usado correctamente, un elemento rotatorio se sumará a la estética de su sitio.
Mientras lea este artículo, consulte repositorio complementario , para que pueda ver los conceptos en acción. Saber cómo rotar un elemento será una gran adición a su caja de herramientas CSS.
CSS rotar ()
La función CSS rotar () le permite rotar un elemento en un eje 2D. La función de rotación () toma un argumento: el ángulo en el que desea rotar su elemento web. Puede rotar un elemento en sentido horario o antihorario.
Veamos la sintaxis de la función de rotación ():
El valor del "ángulo" representa el número de grados que debe rotar el elemento. Puede especificar una rotación en el sentido de las agujas del reloj utilizando un número positivo de grados (por ejemplo, 45). O puede girar en la dirección opuesta utilizando un valor de grado negativo (por ejemplo, -39).
La función de rotación () se puede aplicar a cualquier elemento HTML. Por ejemplo, puede rotar un párrafo de texto. O puede rotar una imagen.
Una rotación HTML aparece tan pronto como renderiza la página, por lo que no hay rotación visible. Para ver la rotación en acción, debe usar una transición CSS . Las transiciones cambian el estado de un elemento cuando se realiza una acción, como cuando un cursor pasa sobre un elemento.
