Voltear un elemento de imagen usando CSS

En este artículo, vamos a aprender cómo voltear una imagen utilizando técnicas CSS ? Esto se logra a través de una propiedad especial conocido como ‘transformar’ que transforma el elemento. La propiedad transform tiene una ‘escala ()’ función, que le dará la vuelta la imagen.

CSS es el último conjunto de herramientas class modernos diseñadores de páginas web, que aman a llevar a la realidad sus páginas web. CSS proporciona una gran cantidad de opciones de personalización que son lo suficientemente for transformar una página web basada en un texto aburrido a una página web en toda regla con un diseño intuitivo y las interacciones increíbles.

Un buen ejemplo de ello puede ser una imagen volteada cuando flotaba en él . En este artículo, vamos a construir una página web simple que muestra esta funcionalidad utilizando las técnicas CSS . Esto se logra a través de una propiedad especial conocido como transformar que transforma el elemento. La propiedad transform tiene una escala () función, que le dará la vuelta la imagen, cuando se les proporciona valor negativo.

Código – CSS

.elementZoomed {
transform: scale(2);
}
.elementFlipped {
transform: scale(-1);
}

El valor positivo en la función de escala aumentará el tamaño manteniendo la misma orientación de la imagen. Pero cuando se suministra valor negativo, la imagen se escala inversa y se da el efecto de imagen volteada. Si desea invertir sólo en horizontal, tenemos que utilizar, scaleX () con valor negativo y el mismo va for scaleY) class flip vertical (.

He aquí una demostración de la página web que los usos mover de un tirón en un ejemplo vivo ,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.image {
width: 150px;
height: auto;
}
.zoomed {
margin: 10px auto 30px;
transform: scale(1.5);
}
.flipped {
transform: scale(-1);
}
.flip {
transition: transform .5s;
}
.flip:hover {
transform: scaleX(-1);
}
</style>
</head>
<body>
<h3>Normal Image</h3>
<img src="https://s-media-cache-ak0.pinimg.com/originals/dd/63/94/dd63945fb45f4e9b9f06e9c516867ddd.jpg" alt="" class="image" />
<h3>Zoomed Image</h3>
<img src="https://s-media-cache-ak0.pinimg.com/originals/dd/63/94/dd63945fb45f4e9b9f06e9c516867ddd.jpg" alt="" class="image zoomed" />
<h3>Flipped Image</h3>
<img src="https://s-media-cache-ak0.pinimg.com/originals/dd/63/94/dd63945fb45f4e9b9f06e9c516867ddd.jpg" class="image flipped" />
<h3>Flip one hover</h3>
<img src="https://s-media-cache-ak0.pinimg.com/originals/dd/63/94/dd63945fb45f4e9b9f06e9c516867ddd.jpg" class="image flip">
</body>
</html>

salida

Flip an image element using CSS - 4

Aquí está la demostración en vivo

DEMO

Comparte tus pensamientos en el comentarios abajo.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *