skew

用于通过 transform 倾斜元素的工具类。

快速参考

类	属性
skew-<number>	transform: skewX(<number>deg) skewY(<number>deg);
-skew-<number>	transform: skewX(-<number>deg) skewY(-<number>deg);
skew-(<custom-property>)	transform: skewX(var(<custom-property>)) skewY(var(<custom-property>));
skew-[<value>]	transform: skewX(<value>) skewY(<value>);
skew-x-<number>	transform: skewX(<number>deg));
-skew-x-<number>	transform: skewX(-<number>deg));
skew-x-(<custom-property>)	transform: skewX(var(<custom-property>));
skew-x-[<value>]	transform: skewX(<value>));
skew-y-<number>	transform: skewY(<number>deg);
-skew-y-<number>	transform: skewY(-<number>deg);
skew-y-(<custom-property>)	transform: skewY(var(<custom-property>));
skew-y-[<value>]	transform: skewY(<value>);

示例

基础示例

使用 skew-<number> 等工具类（如 skew-4 和 skew-10）沿两个轴倾斜元素：

skew-3

skew-6

skew-12

<!-- [!code classes:skew-3,skew-6,skew-12] -->
<img class="skew-3 ..." src="/img/mountains.jpg" />
<img class="skew-6 ..." src="/img/mountains.jpg" />
<img class="skew-12 ..." src="/img/mountains.jpg" />

使用负值

使用 -skew-<number> 等工具类（如 -skew-4 和 -skew-10）沿两个轴倾斜元素：

-skew-3

-skew-6

-skew-12

<!-- [!code classes:-skew-3,-skew-6,-skew-12] -->
<img class="-skew-3 ..." src="/img/mountains.jpg" />
<img class="-skew-6 ..." src="/img/mountains.jpg" />
<img class="-skew-12 ..." src="/img/mountains.jpg" />

沿 x 轴倾斜

使用 skew-x-<number> 等工具类（如 skew-x-4 和 -skew-x-10）沿 x 轴倾斜元素：

-skew-x-12

skew-x-6

skew-x-12

<!-- [!code classes:-skew-x-12,skew-x-12,skew-x-6] -->
<img class="-skew-x-12 ..." src="/img/mountains.jpg" />
<img class="skew-x-6 ..." src="/img/mountains.jpg" />
<img class="skew-x-12 ..." src="/img/mountains.jpg" />

沿 y 轴倾斜

使用 skew-y-<number> 等工具类（如 skew-y-4 和 -skew-y-10）沿 y 轴倾斜元素：

-skew-y-12

skew-y-6

skew-y-12

<!-- [!code classes:-skew-y-12,skew-y-12,skew-y-6] -->
<img class="-skew-y-12 ..." src="/img/mountains.jpg" />
<img class="skew-y-6 ..." src="/img/mountains.jpg" />
<img class="skew-y-12 ..." src="/img/mountains.jpg" />

使用自定义值

使用 skew-[<value>] 等工具类，根据完全自定义的值设置倾斜：

<img class="skew-[3.142rad] ..." />

对于 CSS 变量，也可以使用 skew-(<custom-property>) 语法：

<img class="skew-(--my-skew) ..." />

这只是 skew-[var(<custom-property>)] 的简写，会自动为你加上 var() 函数。

响应式设计

使用 md: 等断点变体作为 skewX() 和 skewY() 工具类的前缀，即可仅在中等及以上屏幕尺寸下应用该工具类：

<img class="skew-3 md:skew-12 ..." />

了解如何使用变体，请参阅变体文档。