變形
變形transform
Controlling rotate, scale, skew, or translate an element.
Overview
| 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
Move an element
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) }}Scale pressed controls
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>Rotate or skew decorative elements
Use the same property for rotate, skew, matrix, perspective, or any valid transform function list.
<div class="transform:rotate(2deg)"> Slightly rotated</div>Set the pivot separately
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 conditionally
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>