Flip an Image

Avatar of Chris Coyier
Chris Coyier on (Updated on )

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

.flip-horizontally {
  transform: scaleX(-1);
}

See how one arrow is used to point both directions here:

See the Pen
Flip an Image
by CSS-Tricks (@css-tricks)
on CodePen.

Rotation is another possibility, meaning our one arrow could go lots of directions:

See the Pen
Flip an Image
by CSS-Tricks (@css-tricks)
on CodePen.

This is any image too, or really any element at all.

See the Pen
Flip an Image
by CSS-Tricks (@css-tricks)
on CodePen.

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";
}