Lzh on GitHub

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

<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

<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

<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

<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] ..." src="/img/mountains.jpg" />

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

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

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

响应式设计

为 skewX() 和 skewY() 工具添加断点变体（如 md:）前缀，使其仅在中等及以上屏幕尺寸时应用：

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

在 变体文档 中了解更多关于使用变体的信息。