变换
用于控制元素在3D空间中放置时的透视效果的工具类。
| Class | Styles |
|---|---|
perspective-dramatic | perspective: var(--perspective-dramatic); /* 100px */ |
perspective-near | perspective: var(--perspective-near); /* 300px */ |
perspective-normal | perspective: var(--perspective-normal); /* 500px */ |
perspective-midrange | perspective: var(--perspective-midrange); /* 800px */ |
perspective-distant | perspective: var(--perspective-distant); /* 1200px */ |
perspective-none | perspective: none; |
perspective-(<custom-property>) | perspective: var(<custom-property>); |
perspective-[<value>] | perspective: <value>; |
使用 perspective-normal 和 perspective-distant 等工具类来控制z平面距离屏幕的远近：
perspective-dramatic
perspective-normal
<div class="size-20 perspective-dramatic ..."> <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div> <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div> <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div> <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div> <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div> <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div></div><div class="size-20 perspective-normal ..."> <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div> <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div> <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div> <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div> <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div> <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div></div>这就像将相机移近或移远物体。
使用 perspective-none 工具类从元素中移除透视变换：
<div class="perspective-none ..."> <!-- ... --></div>Use the perspective-[<value>] syntax to set the perspective based on a completely custom value:
<div class="perspective-[750px] ..."> <!-- ... --></div>For CSS variables, you can also use the perspective-(<custom-property>) syntax:
<div class="perspective-(--my-perspective) ..."> <!-- ... --></div>This is just a shorthand for perspective-[var(<custom-property>)] that adds the var() function for you automatically.
Prefix a perspective utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="perspective-midrange md:perspective-dramatic ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.
Use the --perspective-* theme variables to customize the 透视 utilities in your project:
@theme { --perspective-remote: 1800px; }Now the perspective-remote utility can be used in your markup:
<div class="perspective-remote"> <!-- ... --></div>Learn more about customizing your theme in the theme documentation.