transform

Reference for the transform CSS property.

Abbreviation

tf

Full Property

transform

Type

Variables

When using a property with a semantic value like tf-<token>, Maple generates a variable fallback chain depending on the type of the property.

Replace <token> with the value segment after the dash in your utility class.

The chain is evaluated from left to right, using the first defined variable and falling through to the next variable or default.

Value Resolution

The property resolves its semantic token before falling back to the literal value.

Custom value

Resolves the semantic token for this property.

--tf-<token>Most Specific

--<token>

<token>Default

translate (tl)

Resolution for the tl utility class.

translate value

Resolves the semantic token for translate.

--tl-<token>Most Specific

--space-<token>

--<token>

<token>Default

translateX (tlx)

Resolution for the tlx utility class.

translateX value

Resolves the semantic token for translateX.

--tlx-<token>Most Specific

--space-<token>

--<token>

<token>Default

translateY (tly)

Resolution for the tly utility class.

translateY value

Resolves the semantic token for translateY.

--tly-<token>Most Specific

--space-<token>

--<token>

<token>Default

translateZ (tlz)

Resolution for the tlz utility class.

translateZ value

Resolves the semantic token for translateZ.

--tlz-<token>Most Specific

--space-<token>

--<token>

<token>Default

translate3d (tl3)

Resolution for the tl3 utility class.

translate3d value

Resolves the semantic token for translate3d.

--tl3-<token>Most Specific

--space-<token>

--<token>

<token>Default

scale (scale)

Resolution for the scale utility class.

scale value

Resolves the semantic token for scale.

--scale-<token>Most Specific

--<token>

<token>Default

scaleX (scalex)

Resolution for the scalex utility class.

scaleX value

Resolves the semantic token for scaleX.

--scalex-<token>Most Specific

--<token>

<token>Default

scaleY (scaley)

Resolution for the scaley utility class.

scaleY value

Resolves the semantic token for scaleY.

--scaley-<token>Most Specific

--<token>

<token>Default

scaleZ (scalez)

Resolution for the scalez utility class.

scaleZ value

Resolves the semantic token for scaleZ.

--scalez-<token>Most Specific

--<token>

<token>Default

scale3d (scale3)

Resolution for the scale3 utility class.

scale3d value

Resolves the semantic token for scale3d.

--scale3-<token>Most Specific

--<token>

<token>Default

rotate (rot)

Resolution for the rot utility class.

rotate value

Resolves the semantic token for rotate.

--rot-<token>Most Specific

--angle-<token>

--<token>

<token>Default

rotateX (rotx)

Resolution for the rotx utility class.

rotateX value

Resolves the semantic token for rotateX.

--rotx-<token>Most Specific

--angle-<token>

--<token>

<token>Default

rotateY (roty)

Resolution for the roty utility class.

rotateY value

Resolves the semantic token for rotateY.

--roty-<token>Most Specific

--angle-<token>

--<token>

<token>Default

rotateZ (rotz)

Resolution for the rotz utility class.

rotateZ value

Resolves the semantic token for rotateZ.

--rotz-<token>Most Specific

--angle-<token>

--<token>

<token>Default

rotate3d (rot3)

Resolution for the rot3 utility class.

rotate3d value

Resolves the semantic token for rotate3d.

--rot3-<token>Most Specific

--angle-<token>

--<token>

<token>Default

skew (skew)

Resolution for the skew utility class.

skew value

Resolves the semantic token for skew.

--skew-<token>Most Specific

--angle-<token>

--<token>

<token>Default

skewX (skewx)

Resolution for the skewx utility class.

skewX value

Resolves the semantic token for skewX.

--skewx-<token>Most Specific

--angle-<token>

--<token>

<token>Default

skewY (skewy)

Resolution for the skewy utility class.

skewY value

Resolves the semantic token for skewY.

--skewy-<token>Most Specific

--angle-<token>

--<token>

<token>Default

matrix (mtx)

Resolution for the mtx utility class.

matrix value

Resolves the semantic token for matrix.

--mtx-<token>Most Specific

--<token>

<token>Default

matrix3d (mtx3)

Resolution for the mtx3 utility class.

matrix3d value

Resolves the semantic token for matrix3d.

--mtx3-<token>Most Specific

--<token>

<token>Default