Transforms

transform

Controlling rotate, scale, skew, or translate an element.

Class	Declarations
`transform:<function>`	`transform: <function>;`
`transform:translate(<x>,<y>)`	`transform: translate(<x>,<y>);`
`transform:translate3d(<x>,<y>,<z>)`	`transform: translate3d(<x>,<y>,<z>);`
`transform:translateX(<x>)`	`transform: translateX(<x>);`
`transform:translateY(<y>)`	`transform: translateY(<y>);`
`transform:translateZ(<z>)`	`transform: translateZ(<z>);`
`transform:scale(<both>)`	`transform: scale(<both>);`
`transform:scale(<x>,<y>)`	`transform: scale(<x>,<y>);`
`transform:scale3d(<x>,<y>,<z>)`	`transform: scale3d(<x>,<y>,<z>);`
`transform:scaleX(<x>)`	`transform: scaleX(<x>);`
`transform:scaleY(<y>)`	`transform: scaleY(<y>);`
`transform:scaleZ(<z>)`	`transform: scaleZ(<z>);`
`transform:skew(<x>,<y>)`	`transform: skew(<x>,<y>);`
`transform:skewX(<x>)`	`transform: skewX(<x>);`
`transform:skewY(<y>)`	`transform: skewY(<y>);`
`transform:rotate(<angle>)`	`transform: rotate(<angle>);`
`transform:rotate3d(<x>,<y>,<z>,<angle>)`	`transform: rotate3d(<x>,<y>,<z>,<angle>);`
`transform:rotateX(<value>)`	`transform: rotateX(<value>);`
`transform:rotateY(<value>)`	`transform: rotateY(<value>);`
`transform:rotateZ(<value>)`	`transform: rotateZ(<value>);`
`transform:perspective(<value>)`	`transform: perspective(<value>);`
`transform:matrix(<a>,<b>,<c>,<d>,<x>,<y>)`	`transform: matrix(<a>,<b>,<c>,<d>,<x>,<y>);`
`transform:matrix3d(<a1>,<b1>,<c1>,<d1>)`	`transform: matrix3d(<a1>,<b1>,<c1>,<d1>);`

Examples

Use transform:* to write a native transform function directly in the class name.

<button class="transition:transform|150ms|ease-out transform:translateY(-2px):hover">    Lift</button>

Generated CSS

@layer utilities {    .transform\:translateY\(-2px\) {        transform: translateY(-2px)    }}

Transforms are useful for small interaction feedback because they do not require layout recalculation.

<button class="transition:transform|120ms|ease-out transform:scale(.98):active">    Press</button>

Use the same property for rotate, skew, matrix, perspective, or any valid transform function list.

<div class="transform:rotate(2deg)">    Slightly rotated</div>

Use transform-origin when the transform should rotate or scale around a specific point.

<div class="transform-origin:top|right transform:scale(.95):hover">    Scales from the top right</div>

Apply styles based on different states using selectors and conditional queries.

<div class="transform:translateY(-2px):hover transform:scale(.98)@sm transform:none@print">...</div>

Setting how an element is expected to change in the browser.

Defining the layout box to which transform and transform-origin properties relate.