Mientras desarrolla una página web, los DIV generalmente se colocan horizontalmente en la pantalla de visualización de forma predeterminada. Sin embargo, CSS proporciona varias formas de reorganizar los DIV de acuerdo con las preferencias. También puede cambiar la orientación y el ángulo del DIV usando CSS. En este caso, es posible rotar el DIV de acuerdo con el grado requerido.

En esta guía, hablará específicamente sobre el procedimiento para rotar un DIV en un ángulo de 90 grados. Entonces empecemos!

Cómo rotar Div 90 grados en CSS?

Para rotar el DIV a 90 grados en CSS "transformarSe utiliza la propiedad. Como primer paso, discutiremos la propiedad de transformación para que pueda comprender mejor cómo funciona.

¿Qué es la propiedad "transformar" en CSS??

Para la transformación de un elemento 2D o 3D, el "transformarSe utiliza la propiedad de CSS. Esta propiedad permite que un elemento gire, se mueva, se sesgue y escala.

Sintaxis

La sintaxis de la propiedad de transformación es:

Transformar: ninguno | transformación-funciones

Aquí está la descripción de los valores anteriores:

• ninguno: Se usa para restringir la transformación de cualquier elemento.
• transformación-funciones: Hay varias funciones como "girar()","escala()","mover()" y "sesgar()"Eso se puede especificar.

Ahora, pasemos al ejemplo práctico de usar la propiedad de transformación para rotar 90 grados en CSS.

Ejemplo: girando un DIV 90 grados utilizando la propiedad de "transformar" CSS

En primer lugar, en el de HTML, crearemos un encabezado usando

etiqueta y un contenedor con el nombre de la clase como "div2":

Rotar Div 90 grados:

Rotación de Div

Luego, en CSS, use "div"Para acceder al contenedor creado en el archivo HTML. Después de eso, establezca el ancho y la altura del Div como "200px" y "100px", Establezca el color de fondo del Div como"RGB (129, 129, 38)". Además, estableceremos el borde de Div como "5px" ancho, "sólido"Tipo, y"rojo" color:

div
Ancho: 200px;
Altura: 100px;
Antecedentes: RGB (129, 129, 38);
borde: 5px rojo sólido;

El resultado del código dado es:

Ahora, aplique el "transformar"Propiedad y pase"90"Grados como un argumento a la función rotada () y transformar el origen como"30%":

transformar: girar (90 grados);
transformación-origen: 30%;

Guarde el código agregado y abra el archivo HTML en el navegador. Como resultado, verá que el DIV agregado se gira 90 grados:

Hemos compilado el método más fácil para rotar un DIV 90 grados en CSS.

Conclusión

Para la rotación de un DIV 90 grados en CSS, el "transformarSe puede utilizar la propiedad. Se usa para la transformación de elementos 2D o 3D. Además, esta propiedad permite que un elemento HTML se gire, se asqueje, escalen y se mueva. Este manual discutió el procedimiento de girar un DIV 90 grados en CSS.