Transform

Syntax

Class
Properties
transform-{transformFunction...}
transform: {...};
transform-none
transform: none;

Parameters

transformFunction
<...transformFunction>

One or more transform function specifications.

<div class="t1 px-16 py-4 bg-c-white rounded-3 color-blue b-2-blue shadow-8 my-32 cursor-pointer select-none transform-none">Button</div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
One transformation: scale down to 50%
t1 transform-scale-50
.t1.transform-scale-50 { transform: scale(0.5); }
Multiple transformations: scale, rotate, skew, translate.
t1 transform-scale-50-rotate-90-skew-2-4-translate-10-20
.t1.transform-scale-50-rotate-90-skew-2-4-translate-10-20 { transform: scale(0.5) rotate(90deg) skew(2deg, 4deg) translate(10px, 20px); }
Multiple transformations in different order: translate, skew, rotate, scale.
t1 transform-translate-10-20-skew-2-4-rotate-90-scale-50
.t1.transform-translate-10-20-skew-2-4-rotate-90-scale-50 { transform: translate(10px, 20px) skew(2deg, 4deg) rotate(90deg) scale(0.5); }
No transformation.
t1 transform-none
.t1.transform-none { transform: none; }