¡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í:
Vea Pen
Flip an Image por CSS-Tricks (@ css-tricks)
en CodePen.
La rotación es otra posibilidad, lo que significa que nuestra única flecha podría ir en muchas direcciones:
Vea Pen
Flip an Image por CSS-Tricks (@ css-tricks)
en CodePen.
Esta es también cualquier imagen, o realmente cualquier elemento.
Vea Pen
Flip an Image por CSS-Tricks (@ 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"; )