Skip to main content
Version: 4.x

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.

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.