En este artículo, aprenderá cómo voltear una imagen (agregar efecto de espejo), tanto horizontal como verticalmente cuando el mouse se desplace sobre ella. Esto se puede hacer aplicando la transformación a la imagen como se muestra en el siguiente ejemplo:
Ejemplo 1: Este ejemplo representa cómo voltear una imagen horizontalmente transformándola a lo largo del eje X usando la propiedad transform: scaleX(-1) .
<!DOCTYPE html>
<html>
<head>
<style>
img:hover{
transform: scaleX(-1);
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<img src="gfg.jpg" width="50%">
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo representa cómo voltear una imagen verticalmente transformándola a lo largo del eje Y usando la propiedad transform: scaleY(-1) .
<!DOCTYPE html>
<html>
<head>
<style>
img:hover{
transform: scaleY(-1);
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<img src="gfg.jpg" width="50%">
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por riyakalra59 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA