Normalmente, cuando se agrega texto a una página web en una posición horizontal en la pantalla. Sin embargo, CSS proporciona varias formas de cambiar la posición del texto de acuerdo con las preferencias. También podemos cambiar la dirección y el ángulo del texto utilizando las propiedades de CSS. Más específicamente, el texto se puede girar a 90 grados.

Este manual te enseñará cómo rotar el texto a 90 grados. Entonces empecemos!

Cómo rotar el texto 90 grados en CSS?

Para rotar el texto a 90 grados en CSS, el "transformarSe utiliza la propiedad. Antes de usarlo, en primer lugar, discutiremos esta propiedad CSS para una mejor comprensión.

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

El "transformarLa propiedad se utiliza para la transformación 2D y 3D de cualquier elemento. Esta propiedad permite que un elemento gire, se mueva, se sesgue y escala. También puede utilizar esta propiedad para rotar el texto agregado a 90 grados.

Sintaxis

Sintaxis del "transformar"La propiedad es:

Transformar: ninguno | transformación-funciones

Descripción de los valores anteriores son:

• ninguno: Se usa para no establecer transformación en ningún elemento.
• transformación-funciones: Se puede utilizar para especificar diferentes funciones, como Rotate (), escala (), Move () y skew ().

Pasemos al ejemplo práctico para utilizar la propiedad de transformación para el texto giratorio en 90 grados.

Ejemplo: texto giratorio 90 grados en CSS

En el de HTML, agregaremos un encabezado y un párrafo usando

y

Etiqueta, respectivamente:

Linuxhint

Rotación del texto en 90 grados

Esto mostrará la siguiente salida:

Ahora, nos moveremos al CSS y aplicaremos el "transformar"Propiedad para ella. Para hacerlo, use "pag"Para acceder al párrafo creado en el archivo HTML. Después de eso, use la propiedad de transformación y establezca el ángulo de rotación como "90 grados"En la función rotada (). A continuación, usa el "transformación"Propiedad y establecer su valor en"izquierda"Para rotar el texto en sentido horario. Además, establecemos el margen-izquierda "70px"Para dar el margen desde el lado izquierdo del párrafo, y para el estilo, establecer el peso de la fuente y el tamaño de la fuente como"más audaz" y "largo X", Respectivamente:

pags
transformar: girar (90 grados);
transformación de origen: izquierda;
margen izquierda: 70px;
Font-peso: más audaz;
tamaño de fuente: X-Large;

Nota: Aquí el "transformaciónLa propiedad se utiliza para establecer el eje x y el eje y de rotación.

Después de la implementación del código anterior, vaya al HTML y ejecútelo para ver el siguiente resultado:

Se puede observar que usando el "transformarPropiedad, nuestro texto se gira correctamente a 90 grados.

Conclusión

Para rotar el texto a 90 grados, el "transformarSe utiliza la propiedad. El ángulo de la rotación se establece de acuerdo con el valor de grado especificado. Usando esto, también puede definir diferentes ángulos del texto de acuerdo con su elección. En este artículo, hemos explicado cómo rotar el texto 90 grados utilizando la propiedad de transformación con la ayuda de un ejemplo.