Tailwind CSS - 變換原點

Tailwind CSS 傾斜 是一種實用程式，用於透過指定元素的原點來應用變換。

Tailwind CSS 變換原點類

以下是用於應用變換原點的 Tailwind CSS 變換原點 類的列表。

類	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>

列印頁面