CSS gira los 10 grados superiores

“Es posible que haya probado el método de rotación mientras observa sus fotos en el móvil porque a veces tomas fotos en diferentes ángulos en lugar de una forma horizontal simple. Solo así, las páginas web HTML usan el estilo CSS para rotar sus elementos en la pantalla del navegador y crear muchas animaciones. Para esto, nos proporciona la propiedad de transformación del estilo CSS para rotar cualquier elemento a tantos grados como sea posible. Por lo tanto, hemos decidido cubrir este artículo con ejemplos de uso de la propiedad de transformación para algunos de los elementos de HTML para rotarlos 90 grados derecha o izquierda."

Ejemplo 01

Comencemos demostrando cómo se puede girar un elemento de HTML 90 grados. Este ejemplo se ha inicializado con la etiqueta principal "HTML" seguida de la etiqueta "Cabeza" que titula nuestra página web HTML con el "CSS gira 90 grados" en la etiqueta "Título". El elemento corporal de este código HTML se ha inicializado con el encabezado del tamaño 1, I.mi., el mayor rumbo de HTML. Es solo un encabezado simple sin rotación en absoluto. Luego, tenemos una sección "div" que también se colocará normalmente en la pantalla de la página web HTML sin ninguna rotación.

Aquí se ha utilizado otra sección "div" con la clase especificada "rotada". Ambas secciones DIV contienen algún texto dentro de ellas, pero la segunda sección "Div" se girará en la pantalla, mientras que la primera permanecerá normal. El elemento "cuerpo" ahora está cerrado, y estamos aquí en la etiqueta "estilo" para peinar esta página HTML. Ambas secciones "Div" se han diseñado con ancho y altura de 100 píxeles, con un poco de color del cielo de fondo. Después de eso, la clase "rotada" se usó para diseñar el segundo div a 90 grados utilizando la propiedad "transformar" de CSS con el color de fondo rojo. Debido al uso del color de fondo en el segundo "div" con su clase, el segundo color anulará el primer color en esta sección DIV específica. Guardemos este código y lo ejecutemos con el menú "Ejecutar" del código Visual Studio.

Tenemos la salida a continuación para este script HTML. El primer div se coloca normalmente en la pantalla de nuestro navegador sin rotación. Mientras que el otro "div" se gira 90 grados según la dirección y la colocación de su texto utilizando el atributo "transformar" de CSS, I.mi., de arriba hacia abajo.

Ejemplo 02

Dentro de este ejemplo, utilizaremos el método de atributo de transformación "Rotar" en lugar del método simple "Rotar" para rotar un elemento específico del script HTML. Esta vez, hemos vuelto a usar las mismas etiquetas HTML y "Cabeza" que siguen el mismo "título". El área del cuerpo se ha inicializado con el encabezado simple del tamaño 1 después de una etiqueta de párrafo simple que contiene una línea de texto. Se ha inicializado una sección DIV normal en la página HTML, que demuestra que no se aplicará rotación a ella.

Otra sección "Div" se ha inicializado con su ID "Rotar", y contendrá una oración larga que explica que la función de rotación se ha aplicado a este DIV para la rotación de 90 grados. El cuerpo y las etiquetas HTML están cerradas hasta ahora. La etiqueta de estilo contiene el estilo para ambas etiquetas "div", yo.mi., El ancho de ambas etiquetas DIV sería de 210 píxeles, la altura sería de 90 píxeles, color de fondo amarillo con un borde marrón sólido de 2 píxeles para ambos.

Después de esto, hemos estado aplicando el atributo "Rotatez" de la propiedad de transformación en la segunda sección Div utilizando la ID de esta sección, I.mi., "girar". Se ha utilizado para rotar el div a -9- grados, yo.mi., En la dirección opuesta (z) de la salida de ejemplo anterior. La propiedad de color de fondo se ha utilizado nuevamente para anular el último color de fondo de estilo para esta sección DIV específica, I.mi., Será verde, no amarillo, debido a la prima. Este ejemplo se ha completado aquí y está listo para la ejecución en el navegador Chrome.

La salida de este ejemplo de código HTML ha mostrado 1 encabezado, 1 párrafo y 2 secciones DIV en la pantalla del navegador Chrome. Al mismo tiempo, la primera sección Div del color de fondo amarillo se ha colocado en la dirección de izquierda a derecha sin una rotación de 1 grado. Por otro lado, la sección Div Green se ha girado -90 grados a la izquierda, opuesta a la salida de 90 grados simples que se colocarían en la dirección correcta de una página HTML.

Ejemplo 03

Tengamos nuestro último ejemplo de este artículo para demostrar el uso de una propiedad de transformación simple para rotar algunos elementos HTML a 90 grados con un pequeño cambio. Para esto, hemos comenzado este script HTML con la etiqueta principal HTML seguida de la etiqueta de cabeza. Esta etiqueta de cabeza contiene una etiqueta de título para titular la página web HTML como "CSS rota 90 grados" hasta ahora una vez más.

Después de esto, tenemos una etiqueta de estilo para diseñar la página web utilizando diferentes propiedades de estilo CSS. Por el momento, debemos omitir su explicación porque tenemos que echar un vistazo a la sección del cuerpo de esta página web HTML antes de saltar al estilo. Entonces, la sección del cuerpo contiene un encabezado simple de tamaño 1, yo.mi., el mayor rumbo de HTML. Después de este encabezado, tenemos una sección DIV normal que se creará en nuestra página web HTML, y no se girará.

Después de eso, tenemos otra sección Div para usar en la página web HTML que se girará 90 grados con respecto a la dirección original de la página. Se ha asignado con la clase "Rotar" para su uso en el estilo. Después de esto, hemos estado avanzando hacia la explicación de la etiqueta de estilo para agregar algo de estilo a nuestra página HTML. El elemento "div" se ha utilizado aquí para el estilo. Hemos estado estableciendo alineación a la izquierda o relleno para las etiquetas a 50px y alineación superior o relleno a 150px. La posición para ambas secciones DIV se ha establecido en absoluto. El ancho y la altura de ambas secciones Div también es la misma i.mi. 200px y 100px respectivamente.

Después de esto, hemos estado utilizando la clase "rotar" de la segunda sección Div para diseñarla por separado también. Hemos estado estableciendo el color de fondo para esta sección Div a transparente, yo.mi., anular la propiedad de color de fondo anterior. Hemos estado usando la propiedad de esquema en lugar de la frontera, yo.mi., Un contorno discontinuo de 5 PX. Además, la propiedad de transformación está aquí para rotar esta sección en particular a 90 grados. Ejecutemos este código ahora.

La salida para este script HTML nos ha mostrado dos elementos DIV en esta página; uno de color amarillo, y el otro es transparente. La sección Div Div es normal en su posición y no gira en absoluto. La sección DIV transparente con un contorno discontinuo se gira 90 grados.

Conclusión

Este artículo demostró el uso de la propiedad de transformación de CSS con diferentes métodos para rotar cualquier elemento HTML de cualquier página web a 90 grados. Para esto, hemos probado un atributo de rotación simple para rotar un elemento a 90 grados y el atributo rotatez para rotar un elemento a los grados "-90", I I.mi., opuesto a los 90 grados.