Gire una imagen en la fuente de imagen en HTML

Las imágenes son una parte esencial de los sitios web que transmiten información y hacen que las páginas web sean más atractivas. Además, los usuarios pueden agregar múltiples tipos de imágenes, incluidas imágenes de productos, controles deslizantes e ilustradores. Además, puede aplicar varios efectos sobre ellos, como voltear o girar. Estas funcionalidades se aplican específicamente a las imágenes de muestra presentes en las aplicaciones web de edición de fotos.

Esta publicación explicará:

• Método 1: Cómo rotar una imagen en la fuente de imagen en HTML?
• Método 2: Cómo rotar una imagen en HTML utilizando propiedades CSS?

Método 1: Cómo rotar una imagen en la fuente de imagen en HTML?

Para rotar una imagen en la fuente de imagen en HTML, utilice el CSS en línea directamente en la fuente de la imagen con la ayuda de instrucciones proporcionadas.

Paso 1: crear un contenedor "div"
En primer lugar, cree un "div"Contenedor con la ayuda del""Etiqueta y asigna un"clase"Atributo con un nombre específico.

Paso 2: Agregar imagen
A continuación, agregue una imagen utilizando el ""Etiqueta junto con el"SRC" atributo. Luego, asigne el nombre de la imagen o la URL de la imagen como un "SRC" valor:

La salida resultante muestra que la imagen se ha agregado correctamente:

Paso 3: gire la imagen
A continuación, para rotar la imagen en una fuente de imagen, aplique el CSS en línea con la ayuda del "estilo"Atributo junto con la propiedad CSS"Transformar: Rotar (30 grados)". El "transformar"Se usa para aplicar la transformación al elemento definido. Hay cuatro valores posibles para la transformación: "girar","escala","mover", y "sesgar". Más específicamente, el "girar()Se utiliza la función para rotar la imagen alrededor de un plano 2D:

Producción

Paso 3: Aplicar un estilo en la fuente de imagen usando CSS
Los usuarios también pueden aplicar las otras propiedades de CSS en la fuente de imagen de acuerdo con sus necesidades. Para este propósito, primero, acceda al ".fuente-IMGClase "y aplique las propiedades CSS de la siguiente manera:

.fuente-IMG
Ancho: 100px;
Altura: 250px;
margen: 100px;

Aquí:

• Se utiliza "ancho" para establecer el ancho del elemento.
• La propiedad de "altura" asigna una altura específica a un elemento.
• "Margen" se usa para establecer el espacio en blanco alrededor del elemento.

Producción

Método 2: Cómo rotar una imagen en HTML utilizando propiedades CSS?

Los usuarios también pueden rotar la imagen usando CSS incrustado. Se pueden utilizar múltiples propiedades para este propósito, como el "girar"Propiedad y la"transformar" propiedad.

Siga los ejemplos proporcionados para rotar la imagen usando CSS:

• Ejemplo 1: Rotar la imagen usando la propiedad "Rotar"
• Ejemplo 2: Rotar la imagen usando la propiedad "transformar"

Ejemplo 1: Rotar la imagen usando la propiedad "Rotar"
El "girarSe utiliza la propiedad CSS para girar el elemento en el sentido de las agujas del reloj alrededor del avión 2d. Para aplicar esta propiedad para rotar la imagen, consulte los pasos dados.

Paso 1: crear un contenedor "div"
Cree un contenedor "div" utilizando el ""Etiqueta e inserte un atributo de clase con un nombre específico.

Paso 2: Agregue una imagen
Luego, agregue una imagen con la ayuda del ""Etiqueta junto con el"SRC" y "alternativo"Atributos. El atributo "Alt" se usa para establecer texto alternativo para la imagen:

Producción

Paso 3: Aplicar la propiedad "Rotar"
Ahora, acceda a la clase usando el selector de clase y el nombre ".girar". Luego, aplique el "margen" y el "girar"Propiedad en él. Por ejemplo, el valor del "girar"Está configurado como"45 grados":

.girar
margen: 100px 50px;
Rotar: 45 grados;

La salida indica que la imagen se gira con éxito utilizando el "girar" atributo:

Ejemplo 2: Rotar la imagen usando la propiedad "transformar"
Acceda a la clase usando ".girar". Luego, aplique el "margen" y "transformar" propiedades:

.girar
margen: 100px 50px;
transformar: girar (320deg);

Aquí el "transformarLa propiedad se usa para transformar la imagen. En nuestro escenario, el valor se establece como "Rotar (320 grados)". Dónde "girar()"Es una función utilizada para rotar el elemento:

La salida anterior muestra que la imagen se gira en el ángulo especificado alrededor del plano 2D.

Conclusión

Para rotar la imagen en la fuente de imagen en HTML, los usuarios pueden utilizar el "estilo"Atributo y establecer el valor como"Transformar: Rotar ()". Además, también puede usar el CSS incrustado para rotar la imagen en la fuente de imagen con la ayuda de "girar" propiedades. Este artículo ha declarado los procedimientos relacionados con la rotación de la imagen en la fuente de la imagen en HTML.