En HTML/CSS, el usuario puede agregar diferentes elementos e Incrustar imágenes es una de ellas. También pueden aplicar diferentes propiedades de CSS para hacer que las páginas web sean más atractivas, como las imágenes de fondo giratorias, la aplicación de bordes, establecer la opacidad de la página y muchas más. CSS también proporciona un "transformarPropiedad que se utiliza para aplicar la transformación multidimensional a un elemento.

Este tutorial ilustrará:

• Cómo agregar imagen en un contenedor?
• Cómo rotar la imagen de fondo en el contenedor?

Cómo agregar imagen en un contenedor?

Para agregar una imagen a un contenedor, pase por los pasos enumerados.

Paso 1: Insertar encabezado

Primero, agregue un encabezado usando el "

"Etiqueta en la página HTML. Luego, inserte el "alinear"Valor de atributo para establecer la alineación del encabezado en el centro.

Paso 2: crear un contenedor Div

A continuación, cree un ""Container y asignar la clase" Imagen-Container "y" Alinear "los atributos.

Paso 3: Agregar imagen en un contenedor Div

Luego, inserte un ""Etiqueta junto con los siguientes atributos:

• El "SRC"El atributo especifica la URL del archivo de medios.
• "alternativo"Se utiliza para definir el texto para un área especificada si no se muestra la imagen.
• "ancho"Asigna el ancho de la imagen.
• "altura"El atributo define la altura de la imagen.
• "estilo"Se usa para especificar el estilo CSS, incluido el borde y el color para elementos:

Imagen HTML

Producción

Cómo rotar la imagen de fondo en el contenedor?

Pruebe las instrucciones que se dan a continuación para rotar la imagen en el contenedor.

Paso 1: Contenedor de acceso

En CSS, primero, acceda al "contenedor de imágenesClase con la ayuda de un selector de puntos.

Paso 2: gire los grados de la imagen "30"

Después de acceder al ""Contenedor, aplique las siguientes propiedades de CSS:

.contenedor de imágenes
transformar: girar (30 grados);
Ancho: 30%;
Altura: 30%;
tamaño de fondo: cubierta;
margen: 30px;

Aquí:

• El "transformarSe utiliza la propiedad para girar el contenedor. Por ejemplo, la función CSS "Rotar (30 grados)"Especifica una transformación que gira el elemento hacia un punto fijo en el plano 2D.
• "altura"La propiedad asigna la altura a un elemento.
• "tamaño de fondo"Asigna el tamaño del fondo del elemento.
• "margenLa propiedad establece el espacio en blanco para un elemento en el lado exterior del elemento definido.

Se puede observar que la imagen se gira a 30 grados del contenedor Div:

Paso 4: Rotar grados de imagen "60"

Para rotar la imagen a 60 grados, establezca el valor del "girar()" funcionan como "60 grados":

transformar: girar (60 grados);

Producción

Esta publicación ha declarado el procedimiento para rotar la imagen de fondo en el contenedor.

Conclusión

Para rotar la imagen en el contenedor, primero, cree un ""Y agregue la imagen utilizando el"" etiqueta. Luego, acceda a la clase para aplicar el "transformarPropiedad para rotar la imagen con el valor especificado. Los usuarios pueden aplicar otras propiedades de CSS para diseñar el elemento, como "altura","tamaño de fondo", y "margen". Esta publicación ha demostrado el método para rotar la imagen en un contenedor.