Tailwind CSS - Skew
Tailwind CSS Skew 是一款用于通过倾斜元素来应用变换的实用程序。
Tailwind CSS Skew 类
以下是用于应用倾斜变换的 Tailwind CSS Skew 类列表
| 类 | CSS 属性 |
|---|---|
| skew-x-0 | transform: skewX(0deg); |
| skew-y-0 | transform: skewY(0deg); |
| skew-x-1 | transform: skewX(1deg); |
| skew-y-1 | transform: skewY(1deg); |
| skew-x-2 | transform: skewX(2deg); |
| skew-y-2 | transform: skewY(2deg); |
| skew-x-3 | transform: skewX(3deg); |
| skew-y-3 | transform: skewY(3deg); |
| skew-x-6 | transform: skewX(6deg); |
| skew-y-6 | transform: skewY(6deg); |
| skew-x-12 | transform: skewX(12deg); |
| skew-y-12 | transform: skewY(12deg); |
Tailwind CSS 倾斜类的功能
- skew-x-* 类用于将元素水平倾斜特定值。{*} 此处指定可根据需要设置的不同倾斜值。
- skew-y-* 类用于将元素垂直倾斜特定值。{*} 此处指定可根据需要设置的不同倾斜值。
Tailwind CSS 变换示例
以下示例将演示元素的不同变换。
水平倾斜元素
以下示例演示了 skew-x-* 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl font-bold mb-3">
Tailwind CSS Skew Classes
</h2>
<div class="flex gap-6">
<div class="w-28 h-28 p-6 bg-green-500 text-center font-bold
text-white text-center font-bold text-white
hover:skew-x-6 duration-500 ">
Hover: skew-x-6
</div>
<div class="w-28 h-28 p-6 bg-green-500 text-center font-bold
text-white text-center font-bold text-white
hover:skew-x-12 duration-500 ">
Hover: skew-x-12
</div>
</div>
</body>
</html>
垂直倾斜元素
以下示例说明了 skew-y-* 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl font-bold mb-3">
Tailwind CSS Skew Classes
</h2>
<div class="flex gap-6">
<div class="w-28 h-28 p-6 bg-green-500 text-center font-bold
text-white text-center font-bold text-white
hover:skew-y-6 duration-500 ">
Hover: skew-y-6
</div>
<div class="w-28 h-28 p-6 bg-green-500 text-center font-bold
text-white text-center font-bold text-white
hover:skew-y-12 duration-500 ">
Hover: skew-y-12
</div>
</div>
</body>
</html>
