ImagesLesson 90Free preview

Flip an Image

This lesson is part of How To · All levels

Summary

Flip an image inverted horizontally or vertically using CSS transformation. scaleX(-1) produced a left-right mirror, while scaleY(-1) flipped up-down. This effect is useful for decorating, animating, or adjusting visual direction without editing an image file.

Key points

Transform: scaleX(-1) turns the image horizontally.
Transform: scaleY(-1) reverses the image vertically.
It can also give a mirror effect with 3D transformation.
Transition makes the reversal process look smooth.
The text in the image goes upside down, so this effect is less appropriate for a typed image.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.