Rotate

Use rotate utilities to rotate an element by a specific angle. Supports positive and negative values for clockwise and counter-clockwise rotation.

Basic example

Use rotate-<number> utilities like rotate-45 and rotate-90 to rotate an element by degrees:

Style('rotate-45 ...', child: Image.network('/img/mountains.jpg'))
Style('rotate-90 ...', child: Image.network('/img/mountains.jpg'))
Style('rotate-210 ...', child: Image.network('/img/mountains.jpg'))

Using negative values

Use -rotate-<number> utilities like -rotate-45 and -rotate-90 to rotate an element counter-clockwise by degrees:

Style('-rotate-45 ...', child: Image.network('/img/mountains.jpg'))
Style('-rotate-90 ...', child: Image.network('/img/mountains.jpg'))
Style('-rotate-210 ...', child: Image.network('/img/mountains.jpg'))

Rotating in 3D space

Use rotate-x-<number>, rotate-y-<number>, and rotate-z-<number> utilities like rotate-x-50, -rotate-y-30, and rotate-z-45 together to rotate an element in 3D space. Perspective is auto-injected so the rotation renders with depth foreshortening:

Style('rotate-x-50 rotate-z-45 ...', child: Image.network('/img/mountains.jpg'))
Style('rotate-x-15 -rotate-y-30 ...', child: Image.network('/img/mountains.jpg'))
Style('rotate-y-25 rotate-z-30 ...', child: Image.network('/img/mountains.jpg'))

Class reference

Class	Description
rotate-<number>	Rotate clockwise by <number> degrees (any integer, e.g. rotate-12, rotate-45, rotate-210)
-rotate-<number>	Rotate counter-clockwise by <number> degrees
rotate-x-<number>	Tilt around the horizontal axis (3D, with auto-perspective)
rotate-y-<number>	Tilt around the vertical axis (3D)
rotate-z-<number>	Equivalent to bare rotate-<number> (z-axis spin)
-rotate-x-<number> / -rotate-y-<number> / -rotate-z-<number>	Negative variants