Back to Docs

Navigation

Flip Classes

Flip classes allow you to flip an element across one or more axes.

In the example below, the first image is the default image and the second image is using .flip--x which flips it across the X axis.

Kevin Geary
Kevin Geary

Your options are:

  • .flip--x
  • .flip--y
  • .flip--xy and .flip--both

This works on containers with background images as well, but when flipping a container that has written content, make sure the written content is in a child div. ACSS will flip this child div back automatically to ensure content is readable.