Skip to main content
Home / Code Snippets / CSS / Flip an Image

Flip an Image

You can flip images with CSS! Possible scenario: having only one graphic for an "arrow", but flipping it around to point in different directions.

img {
  transform: scaleX(-1);
}

Demo

Unflipped

Flipped

Old Vendor Prefixes

For posterity:

img {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);

  filter: FlipH;
  -ms-filter: "FlipH";
}
icon-link icon-logo-star icon-search icon-star