Tailwind CSS - Transform Origin
Tailwind CSS Skew 是一个用于通过指定元素原点来应用变换的实用程序。
Tailwind CSS Transform Origin 类
以下是用于应用变换原点的 Tailwind CSS Transform Origin 类列表。
| 类 | CSS 属性 |
|---|---|
| origin-center | transform-origin: center; |
| origin-top | transform-origin: top; |
| origin-top-right | transform-origin: top right; |
| origin-right | transform-origin: right; |
| origin-bottom-right | transform-origin: bottom right; |
| origin-bottom | transform-origin: bottom; |
| origin-bottom-left | transform-origin: bottom left; |
| origin-left | transform-origin: left; |
| origin-top-left | transform-origin: top left; |
Tailwind CSS 变换原点类的功能
- origin-center 此类用于将元素的变换原点设置为中心。
- origin-top 此类用于将元素的变换原点设置为顶部。
- origin-top-right 此类用于将元素的变换原点设置为右上角。
- origin-right 此类用于将元素的变换原点设置为右侧。
- origin-bottom-right 此类用于将元素的变换原点设置为右下角。
- origin-bottom 此类用于将元素的变换原点设置为底部。
- origin-bottom-left:此类用于将元素的变换原点设置为左下角。
- origin-left:此类用于将元素的变换原点设置为左侧。
- origin-top-left:此类用于将元素的变换原点设置为左上角。
Tailwind CSS 变换原点示例
以下示例将说明基于指定原点的元素的不同变换。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl font-bold mb-12">
Tailwind CSS Origin Classes
</h2>
<div class="grid grid-cols-3 gap-10">
<div class="bg-green-100 border-2 w-28">
<div class="w-28 h-28 p-6 bg-green-500 text-center
font-bold text-white text-center font-bold
text-white origin-center rotate-45">
origin-center
</div>
</div>
<div class="bg-green-100 border-2 w-28">
<div class="w-28 h-28 p-6 bg-green-500 text-center
font-bold text-white text-center font-bold
text-white origin-top rotate-45 ">
origin-top
</div>
</div>
<div class="bg-green-100 border-2 w-28">
<div class="w-28 h-28 p-6 bg-green-500 text-center
font-bold text-white text-center font-bol
text-white origin-top-right rotate-45 ">
origin-top-right
</div>
</div>
</div>
</body>
</html>
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl font-bold mb-12">
Tailwind CSS Origin Classes
</h2>
<div class="grid grid-cols-3 gap-10">
<div class="bg-green-100 border-2 w-28">
<div class="w-28 h-28 p-6 bg-green-500 text-center
font-bold text-white text-center font-bold
text-white origin-right rotate-45">
origin-right
</div>
</div>
<div class="bg-green-100 border-2 w-28">
<div class="w-28 h-28 p-6 bg-green-500 text-center
font-bold text-white text-center font-bold
text-white origin-bottom-right rotate-45 ">
origin-bottom-right
</div>
</div>
<div class="bg-green-100 border-2 w-28">
<div class="w-28 h-28 p-6 bg-green-500 text-center
font-bold text-white text-center font-bol
text-white origin-bottom rotate-45 ">
origin-bottom
</div>
</div>
</div>
</body>
</html>
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl font-bold mb-12">
Tailwind CSS Origin Classes
</h2>
<div class="grid grid-cols-3 gap-10">
<div class="bg-green-100 border-2 w-28">
<div class="w-28 h-28 p-6 bg-green-500 text-center
font-bold text-white text-center font-bold
text-white origin-bottom-left rotate-45">
origin-bottom-left
</div>
</div>
<div class="bg-green-100 border-2 w-28">
<div class="w-28 h-28 p-6 bg-green-500 text-center
font-bold text-white text-center font-bold
text-white origin-left rotate-45 ">
origin-left
</div>
</div>
<div class="bg-green-100 border-2 w-28">
<div class="w-28 h-28 p-6 bg-green-500 text-center
font-bold text-white text-center font-bol
text-white origin-top-left rotate-45 ">
origin-top-left
</div>
</div>
</div>
</body>
</html>
