¡Puedes voltear imágenes con CSS! Escenario posible: tener solo un gráfico para una “flecha”, pero darle la vuelta para apuntar en diferentes direcciones.
.flip-horizontally {
transform: scaleX(-1);
}Vea cómo se usa una flecha para señalar en ambas direcciones aquí:
Ver la pluma
Voltear una imagen con Programar Plus(@ css-tricks)
en CodePen.
La rotación es otra posibilidad, lo que significa que nuestra flecha única podría ir en muchas direcciones:
Ver la pluma
Voltear una imagen con Programar Plus(@ css-tricks)
en CodePen.
Esta es también cualquier imagen, o realmente cualquier elemento.
Ver la pluma
Voltear una imagen con Programar Plus(@ css-tricks)
en CodePen.
Prefijos de proveedores antiguos
Para la posteridad:
img {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}