utilities/rotate

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

rotate utility classes and CSS output

The rotate utility generates the following classes and CSS: rotate-none produces rotate: none; rotate-<number> produces rotate: <number>deg; -rotate-<number> produces rotate: calc(<number>deg * -1); rotate-(<custom-property>) produces rotate: var(<custom-property>); rotate-[<value>] produces rotate: <value>;

rotate-x rotate-y rotate-z 3D rotation utilities

The rotate-x, rotate-y, and rotate-z utilities support 3D rotation. rotate-x-<number> produces transform: rotateX(<number>deg) var(--tw-rotate-y); -rotate-x-<number> produces transform: rotateX(-<number>deg) var(--tw-rotate-y); rotate-x-(<custom-property>) produces transform: rotateX(var(<custom-property>)) var(--tw-rotate-y); rotate-x-[<value>] produces transform: rotateX(<value>) var(--tw-rotate-y);. Similarly, rotate-y-<number> produces transform: var(--tw-rotate-x) rotateY(<number>deg); and rotate-z-<number> produces transform: var(--tw-rotate-x) var(--tw-rotate-y) rotateZ(<number>deg);

rotate-x rotate-y rotate-z support negative values and custom properties

The 3D rotation utilities rotate-x, rotate-y, and rotate-z each support negative values with the -prefix syntax (e.g., -rotate-x-<number>, -rotate-y-<number>, -rotate-z-<number>), custom properties with parentheses syntax (e.g., rotate-x-(<custom-property>)), and arbitrary values with bracket syntax (e.g., rotate-x-[<value>]).

rotate utilities support arbitrary values

The rotate utility supports arbitrary values using bracket notation. You can use rotate-[<value>] to apply any custom rotation value, or rotate-(<custom-property>) to reference a custom CSS property.

Basic rotate examples

The rotate-<number> utility rotates an element clockwise by the specified number of degrees. Examples include rotate-45 for 45 degrees, rotate-90 for 90 degrees, and rotate-210 for 210 degrees.

Negative rotate examples

The -rotate-<number> utility rotates an element counterclockwise by the specified number of degrees. Examples include -rotate-45 for -45 degrees, -rotate-90 for -90 degrees, and -rotate-210 for -210 degrees.

3D rotation examples

3D rotation can be achieved by combining rotate-x, rotate-y, and rotate-z utilities on the same element. For example, rotate-x-50 rotate-z-45 rotates an element 50 degrees around the X axis and 45 degrees around the Z axis; rotate-x-15 -rotate-y-30 rotates 15 degrees around the X axis and -30 degrees around the Y axis; rotate-y-25 rotate-z-30 rotates 25 degrees around the Y axis and 30 degrees around the Z axis.

rotate utility supports responsive design

The rotate utility supports responsive design breakpoints. You can apply different rotation values at different breakpoints using responsive prefixes.

Give your agent this brain