CSS gire el fondo
Ejemplo # 01:
Comencemos con este script HTML con la etiqueta básica HTML simple seguida de la etiqueta de cabeza utilizada para titular la página web a través de su etiqueta de "título". El cuerpo de la etiqueta HTML se ha cubierto con diferentes elementos como Div y etiquetas. Tenemos dos elementos DIV principales en este script HTML. Dentro de ambos elementos Div principales, también tenemos dos etiquetas "div" de los hijos que son especificadas por dos clases diferentes A y B. Ambas etiquetas DIV internas están utilizando el elemento "etiqueta" para etiquetar algún texto dentro del "DIV" y especificar el DIV como normal o rotado. Ambas etiquetas obtuvieron el borde de 1px en estilo discontinuo, mientras que la primera etiqueta Div sería azul y la segunda sería rojo.
Cuando echamos un vistazo a la etiqueta de estilo, llegamos a saber que ambas secciones "Div" internas están diseñadas por separado usando sus respectivas clases: A y B. Ambos elementos Div están utilizando la misma imagen de fondo del sistema sin repetición de fondo, la misma altura y el mismo ancho: 120px y 30px. Mientras que el segundo Div interior también contendría un estilo adicional. Hemos utilizado la propiedad de margen para colocar esta sección Div 100px lejos de la parte superior de la página HTML y la giramos 90 grados a la derecha utilizando la propiedad de transformación.
Después de eso, lo rotamos 45 grados en la dirección opuesta desde donde comenzó. Guardemos y ejecutemos este script ahora.
La siguiente salida muestra una representación clara del código HTML anterior. La primera sección del div contiene una imagen con una etiqueta sin rotación y no se ha repetido ningún fondo. La otra sección Div ha estado conteniendo una imagen y la etiqueta mientras se ha rotado 90 grados primero y luego sesgado, traduciéndola y escala 45 grados hacia su posición original.
Ejemplo # 02:
En el ejemplo anterior, hemos girado las secciones DIV junto con sus imágenes de fondo y las etiquetas que contienen. Ahora, observaremos el uso de diferentes propiedades para rotar la imagen de fondo con y sin su texto en la página HTML. El cuerpo de esta página HTML se ha llenado con un título de tamaño 1 y 4 secciones DIV diferentes con algunos textos. Todos estos 4 divs se han especificado con diferentes identificaciones y clases para diseñarlos por separado: "RotateImageonly" ID para la primera clase de Div, "Rotado" para la segunda clase de Div, "Rotatetranslate" para la tercera sección Div y "Translaterotate" para la cuarta sección del div. Dentro del elemento de etiqueta de estilo, hemos estado utilizando el elemento div en el mismo estilo para todos los 4 elementos para algunas propiedades. Entonces, hemos estado especificando la posición absoluta, el relleno izquierdo de 40 px, el relleno superior de 100px, el ancho y la altura de 100px para todos, y la imagen de fondo sería la misma para todos.
Mientras hemos estado utilizando la ID del primer div en esta etiqueta de estilo para cambiar su posición a relativo, cambiando el ancho y la altura, y los márgenes izquierdos. La imagen de fondo para el primer div no se anularía y la más antigua se utilizaría. La imagen de fondo para esta sección DIV se giraría 45 grados sin traducir ni girar su texto. Después de esto, las tres secciones del DIV anularían la nueva imagen de fondo.
La segunda sección Div ha sido descrita de 2px discontinua, rotada 45 grados. Su texto también se traducirá en 200 píxeles. La tercera imagen de fondo de la sección Div se ha girado 90 grados junto con su texto, mientras que la cuarta sección Div ha sido girada 180px junto con su texto.
La salida para este script HTML ha mostrado un total de 4 divs con imágenes de fondo. El primer DIV ha estado utilizando las diferentes imágenes de fondo, mientras que las otras están anulando las nuevas imágenes. La imagen de fondo de la primera sección del div se ha girado a 45 grados, mientras que su texto no ha sido girado.
La imagen de fondo para el segundo div giró a 45 grados, mientras que su texto se ha traducido a 200 píxeles. La imagen de fondo para la tercera sección DIV ha sido girada a 90 grados junto con su texto. Solo así, la imagen de fondo para la cuarta sección se ha girado a 180 grados y su texto se ha traducido a 180 píxeles.
Ejemplo # 03:
Comencemos con el último ejemplo de este artículo para usar algunas propiedades de CSS en las imágenes de fondo de algunos elementos de la página web HTML. Primero echaremos un vistazo al cuerpo de la página HTML. Dentro de la etiqueta del cuerpo para esta página HTML, hemos estado usando el único encabezado de tamaño 1. No queda nada por hacer en la etiqueta del cuerpo, por lo que echaremos un vistazo a la etiqueta de estilo de la página HTML. Dentro de la etiqueta principal del código HTML, hay una etiqueta de título que se ha utilizado para titular esto como "Transformación de imágenes de fondo".
Esta etiqueta de estilo se ha iniciado con el uso de elementos corporales. Para el estilo hemos estado utilizando la imagen de fondo de la propiedad para agregar la imagen como fondo. Hemos estado configurando el fondo en no repetir para que la imagen de fondo no se pueda repetir en la página web HTML. Además, la propiedad de alcance de fondo se utiliza para corregir la imagen de fondo y el texto-superflujo se ha utilizado para heredar las propiedades generales de contenido en toda la página. Se ha utilizado otro elemento corporal con el atributo posterior para crear otra imagen de fondo con una posición absoluta: márgenes superiores del 10%, margen izquierdo del 30%, ancho y altura de 300 píxeles junto con la misma imagen de fondo que contiene la opacidad de 0.5.
El radio para el borde de esta imagen se ha establecido en 50%. Esto significa que esta imagen se mostrará en un círculo. Además, su imagen de fondo se girará 45 grados y no se ha aplicado ninguna propiedad de repetición de fondo para que la imagen se pueda repetir muchas veces.
La salida ha estado mostrando la primera imagen de fondo que se muestra simplemente sin ninguna rotación, sin ninguna traducción, y sin repetir. Mientras que la segunda imagen de fondo se ha girado 45 grados con un radio del 50% y la imagen de fondo se repite muchas veces como se muestra en la imagen a continuación.
Conclusión
Este artículo constituye el uso de diferentes propiedades de CSS para rotar las imágenes de fondo de cualquier página HTML en ciertos grados. Se han intentado utilizar ejemplos de HTML para utilizar estas propiedades interesantes de CSS de una manera muy simple y única. Para estos ejemplos, hemos utilizado la propiedad de imagen de fondo, la propiedad de reposo de fondo, la propiedad de unión de fondo, la propiedad de texto-superflujo, el contenido, la posición, la propiedad de radio fronterizo, la transformación, la opacidad y las diferentes propiedades de ancho/altura para lograr la Salida requerida para girar el fondo.