Flip/refleja una imagen horizontalmente + verticalmente con CSS

Las imágenes son un componente de aplicación esencial y entretenido. Contribuyen al diseño de la aplicación y le dan un diseño hermoso. Muchas de las propiedades ofrecidas por CSS son beneficiosas de varias maneras. Más específicamente, proporciona características que permiten el ajuste de la imagen en cualquier dirección, como voltear vertical u horizontalmente, girar y más.

Este artículo lo guiará sobre cómo voltear o reflejar una imagen horizontal y verticalmente con CSS.

Cómo voltear/reflejar una imagen horizontal y verticalmente con CSS?

Hay varios métodos que se pueden usar para voltear o rotar las imágenes en CSS. Discutiremos lo siguiente:

• Método 1: Uso de "Transform: escala ()" propiedad
• Método 2: usando "Transformar: Rotar ()" propiedad

Método 1: Cómo voltear/reflejar una imagen horizontal y verticalmente utilizando la propiedad "SCALE ()"?

El "Transform: escala ()"La propiedad cambia de tamaño de la imagen en el avión 2d. La escala () especifica dos valores de coordenadas para el eje x y el eje y. La cantidad de escala realizada en cada dirección está determinada por sus coordenadas. El "Transform: Scalex ()"La propiedad escala la imagen horizontalmente.

Ejemplo

Agregue dos imágenes en el archivo HTML. El primero se mantendrá como original a lo largo del ejemplo. Mientras que el otro se aplicará con las propiedades CSS:

• El ""La etiqueta se utiliza para incluir una imagen.
• El "SRC"El atributo especifica la URL de la imagen.
• El "alternativo"Se utiliza para especificar el texto si la imagen no se carga en la página web.
• El "ancho"El atributo establece la amplitud de la imagen.
• El "clase"Está configurado con un nombre para acceder a la imagen en CSS.

Aquí está el código HTML del escenario como se mencionó anteriormente:

Inicialmente, la página web se verá así:

Ejemplo 1: voltear la imagen horizontalmente usando la propiedad "transform: escalax ()"

En CSS, agregue el "Transform: Scalex ()"Propiedad para escalar la imagen horizontalmente:

.voltear
transformar: escalax (-1);

Producción

Ejemplo 2: voltear la imagen verticalmente utilizando la propiedad "Transform: scale ()"

Para escalar la imagen verticalmente en CSS, use el "Transform: scaley ()" propiedad:

transformar: scaley (-1);

Producción

Método 2: Cómo voltear/reflejar una imagen horizontal y verticalmente utilizando la propiedad "Transform: Rotate ()"?

El CSS "Transformar: Rotar ()"Gira la imagen alrededor del punto fijo en un plano 2D. La función "Rotatex ()" gira la imagen en el eje x, y el "Rotatey ()" se utiliza para rotar en el eje Y.

Ejemplo 1: voltear la imagen horizontalmente usando la propiedad "Transform: Rotatey ()"

En CSS, agregue el "transformar"Propiedad con el valor"Rotatey ()" en el "voltear"Clase para voltear la imagen horizontalmente en"180"Grados:

transformación: Rotatey (180 grados);

Producción

Ejemplo 2: voltear la imagen verticalmente usando la propiedad "Transform: Rotatex ()"

Agregue el CSS "transformar"Propiedad con el valor"rotatex ()"Para voltear la imagen verticalmente:

transformación: Rotatex (180deg);

Producción

Cómo voltear/reflejar una imagen vertical u horizontalmente en el flotador?

Para aprender a voltear una imagen vertical u horizontalmente en el flotador, pruebe los siguientes pasos.

Paso 1: crear un archivo HTML

Primero, siga los pasos proporcionados para crear un archivo HTML:

• Agrega un ""Elemento y asignarlo una clase"bandeja".
• Dentro de esta tarjeta, agregue otro "" con la clase "carta invertida".
• Entonces, agregue un ""Etiqueta con el"SRC","alternativo", y "estilo"Atributos.

Aquí está el código HTML:

Paso 2: Clase de estilo "Flip-Box"

El ".bandeja"Se utiliza para acceder al contenedor con la clase"bandeja":

.Flip-Box
Posición: relativo;
Ancho: 300px;
Altura: 300px;
margen: auto;

Las propiedades que se mencionan en el fragmento de código anterior se describen a continuación:

• "posición"Propiedad con el valor"relativo"Establece la posición del elemento de acuerdo con su ubicación actual.
• El "ancho" y "alturaLas propiedades se utilizan para establecer el área del elemento.
• "margen"La propiedad agrega espacios alrededor del elemento.

Paso 3: Clase de estilo "Flip-Card"

Ahora, diseñe el "carta invertida" clase:

.carta invertida
Posición: Absoluto;
Ancho: 100%;
Altura: 100%;
Transición: todos 0.5s facilidad;

La descripción de las propiedades proporcionadas anteriormente se menciona a continuación:

• "posición" con el "absoluto"El valor establece la ubicación del elemento en relación con el elemento casi posicionado.
• "transición"La propiedad ajusta el lento movimiento de los elementos dentro de una duración específica.

Paso 4: Elemento de estilo "IMG"

El ""El elemento está diseñado con el CSS"radio fronterizo" propiedad:

img
Border-Radius: 10px;

Aquí el "radio fronterizo"La propiedad establece las esquinas de la imagen como redonda.

Paso 5: voltee una imagen verticalmente sobre el flotador

Para voltear la imagen en el flotador, el CSS ":flotarSe ha utilizado la pseudo-clase:

.Flip-Box: Hover .carta invertida
transformación: Rotatex (180deg);

Producción

Paso 6: voltee una imagen horizontalmente en el flotador

El "Transformar: Rotatey ()La propiedad se puede utilizar para voltear la imagen horizontalmente:

.Flip-Box: Hover .carta invertida
transformación: Rotatey (180 grados);

Producción

Hemos compilado los enfoques para voltear/reflejar una imagen horizontal y verticalmente con CSS.

Conclusión

Para voltear una imagen en HTML, el CSS "transformar"Propiedad con los valores"escala()" y "girar()Se utilizan. El "escalax ()" y "Rotatey ()"Se ajustan para voltear la imagen horizontalmente. El "Scaley ()" y "rotatex ()"Están configurados para voltear la imagen verticalmente. Para agregar un efecto flotante, el CSS ":flotarSe aplica pseudo-clase. Esta publicación ha explicado múltiples procedimientos sobre cómo voltear una imagen horizontal y verticalmente en CSS.