Skew

Use skew utilities to tilt an element along the X axis, Y axis, or both. Supports positive and negative values.

Basic example

Use skew-<number> utilities like skew-4 and skew-10 to skew an element on both axes:

Style('skew-3 ...', child: Image.network('/img/mountains.jpg'))
Style('skew-6 ...', child: Image.network('/img/mountains.jpg'))
Style('skew-12 ...', child: Image.network('/img/mountains.jpg'))

Using negative values

Use -skew-<number> utilities like -skew-3 and -skew-12 to skew an element on both axes in the opposite direction:

Style('-skew-3 ...', child: Image.network('/img/mountains.jpg'))
Style('-skew-6 ...', child: Image.network('/img/mountains.jpg'))
Style('-skew-12 ...', child: Image.network('/img/mountains.jpg'))

Skewing on the x-axis

Use skew-x-<number> utilities like skew-x-6 and skew-x-12 to skew an element on the x-axis:

Style('-skew-x-12 ...', child: Image.network('/img/mountains.jpg'))
Style('skew-x-6 ...', child: Image.network('/img/mountains.jpg'))
Style('skew-x-12 ...', child: Image.network('/img/mountains.jpg'))

Skewing on the y-axis

Use skew-y-<number> utilities like skew-y-6 and skew-y-12 to skew an element on the y-axis:

Style('-skew-y-12 ...', child: Image.network('/img/mountains.jpg'))
Style('skew-y-6 ...', child: Image.network('/img/mountains.jpg'))
Style('skew-y-12 ...', child: Image.network('/img/mountains.jpg'))

Class reference

Class	Description
skew-<number>	Skew both axes by <number> degrees (e.g. skew-3, skew-12)
-skew-<number>	Skew both axes by -<number> degrees
skew-x-<number>	Skew the x-axis by <number> degrees
-skew-x-<number>	Skew the x-axis by -<number> degrees
skew-y-<number>	Skew the y-axis by <number> degrees
-skew-y-<number>	Skew the y-axis by -<number> degrees