變形
變形框transform-box
Defining the layout box to which transform and transform-origin properties relate.
Overview
| Class | Declarations |
|---|---|
transform-content | transform-box: content-box;
|
transform-border | transform-box: border-box;
|
transform-fill | transform-box: fill-box;
|
transform-stroke | transform-box: stroke-box;
|
transform-view | transform-box: view-box;
|
transform-box:<box> | transform-box: <box>;
|
Examples
Choose the transform reference box
Use transform-box:* to choose which box is used for transform calculations. This is most useful for SVG elements whose fill box, stroke box, and view box can differ.
<svg viewBox="0 0 24 24"> <path class="transform-box:fill-box transform-origin:center transform:scale(.92)" d="M4 4h16v16H4z" /></svg>Generated CSS
@layer utilities { .transform-box\:fill-box { transform-box: fill-box }}Use the border box for HTML elements
For regular HTML elements, border-box makes the element border box the transform reference.
<div class="transform-box:border-box transform-origin:center transform:rotate(1deg)"> Card</div>Pair with transform origin
transform-box:* changes the box; transform-origin:* chooses the point inside that box.
<svg viewBox="0 0 24 24"> <circle class="transform-box:fill-box transform-origin:center transform:scale(1.1)" cx="12" cy="12" r="8" /></svg>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="transform-box:fill-box:hover transform-box:border-box@sm transform-box:border-box@print">...</div>