Cómo aplicar múltiples transformaciones en CSS?

Las imágenes son esenciales para expresar información y mejorar la apariencia de una página web. Estos gráficos HTML se utilizan para crear imágenes llamativas, incluidos anuncios de banner, dibujos y más. Sin embargo, a veces, se requiere girar o voltear imágenes en la página para adaptarse a requisitos visuales específicos para el negocio. Para este propósito, CSS permite a sus usuarios aplicar múltiples "transformar"Propiedades en elementos HTML.

Esta reseña demostrará:

• Cómo agregar/ insertar una imagen en un div?




• Cómo aplicar múltiples transformaciones en CSS?

Cómo insertar una imagen en un div?

Para agregar/insertar una imagen en un DIV, pruebe el procedimiento mencionado.

Paso 1: crear un contenedor Div

Primero, cree un contenedor Div utilizando el "" etiqueta. Luego, inserte un "identificación"Con un nombre particular.

Paso 2: Haz otro contenedor Div

Después de eso, cree otro contenedor Div. Además, agregue un atributo de clase dentro de la etiqueta DIV y especifique un nombre de clase.

Paso 3: Agregar imagen

Agregue una imagen usando el ""Etiqueta y agregue el siguiente atributo mencionado de la siguiente manera:

• "SRC"Se utiliza para agregar la ruta de la imagen dentro del elemento.
• "alturaSe utiliza la propiedad para especificar la altura del elemento definido.
• "ancho"La propiedad define el tamaño del elemento horizontalmente:

Se puede observar que la imagen se ha agregado con éxito en el contenedor:

Ahora, avance hacia la siguiente sección para aplicar múltiples transformaciones en imágenes en CSS.

Cómo aplicar múltiples transformaciones en CSS?

El "transformar"La propiedad en CSS se utiliza para modificar el espacio de coordenadas del modelo de formato visual. Además, se utiliza para aplicar varios efectos a los elementos elegidos, como la rotación, la traducción y el sesgo. Pruebe las instrucciones detalladas para aplicar las numerosas transformaciones en CSS.

Para aplicar las transformaciones múltiples en CSS, el usuario debe probar los siguientes pasos.

Paso 1: Acceso First Div

#IMG-Transform
Text-Align: Center;

Acceda al primer contenedor Div utilizando el selector con el nombre de ID "#IMG-Transform". Para hacerlo, el "texto alineadoLa propiedad se utiliza para alinear el contenedor DIV de acuerdo con el valor específico.

Paso 2: aplicar la primera transformación

Acceda al segundo contenedor Div con la ayuda del selector de puntos y el nombre de la clase como ".primer orden". Luego, aplique el "transformar"Propiedad a la clase seleccionada:

.primer orden
transformación: rotar (90deg) traducir (135px, 180px);

Según el fragmento de código dado:

• El "transformarLa propiedad se utiliza para aplicar una transformación 2D o 3D en un elemento definido. Esta propiedad le permite al usuario girar, escalar, moverse y sesgar los elementos.
• El "girar()"El valor de la propiedad de transformación es una función en CSS que gira el elemento de acuerdo con el valor especificado.
• El "traducir()El método "mueve un elemento desde su posición actual (de acuerdo con los parámetros dados para el eje x y el eje y).

Producción

Paso 3: aplicar la segunda transformación

Ahora, acceda al segundo contenedor Div nuevamente y aplique las siguientes propiedades mencionadas que se enumeran a continuación:

.primer orden
tamaño de fondo: contener;
transformar: girar (-150deg);
margen: 100px;

Aquí:

• El "tamaño de fondoLos establecimientos de la propiedad anulan el comportamiento predeterminado de mosaico de la imagen y le permite al usuario elegir el tamaño de la imagen de fondo de un elemento.

• Entonces el "transformarLa propiedad se utiliza para transformar la imagen de acuerdo con la condición.
• Próximo, "margen"Asigna el espacio fuera del límite definido.

Producción

Eso se trataba de aplicar múltiples transformaciones en CSS.

Conclusión

Para aplicar las transformaciones múltiples en CSS, primero, cree un contenedor DIV con un ""Etiqueta y agregue una ID dentro de la etiqueta Div. Luego, cree otro contenedor Div e inserte una clase con un nombre específico. Después de eso, acceda a Div y aplique el "transformar"Propiedad CSS y establece el valor"girar (90)" grado. Luego, vuelva a repetir el mismo procedimiento para aplicar la otra transformación. Esta publicación explicó el método para aplicar múltiples transformaciones en CSS.