Tailwind CSS - 平移

上一頁
下一頁

Tailwind CSS 平移 是一種用於透過平移元素來應用轉換的實用程式。

Tailwind CSS 平移類

以下是用於應用平移轉換的 Tailwind CSS 平移 類的列表

類 CSS 屬性
translate-x-0 transform: translateX(0px);
translate-y-0 transform: translateY(0px);
translate-x-px transform: translateX(1px);
translate-y-px transform: translateY(1px);
translate-x-0.5 transform: translateX(0.125rem);
translate-y-0.5 transform: translateY(0.125rem);
translate-x-1 transform: translateX(0.25rem);
translate-y-1 transform: translateY(0.25rem);
translate-x-1.5 transform: translateX(0.375rem);
translate-y-1.5 transform: translateY(0.375rem);
translate-x-2 transform: translateX(0.5rem);
translate-y-2 transform: translateY(0.5rem);
translate-x-2.5 transform: translateX(0.625rem);
translate-y-2.5 transform: translateY(0.625rem);
translate-x-3 transform: translateX(0.75rem);
translate-y-3 transform: translateY(0.75rem);
translate-x-3.5 transform: translateX(0.875rem);
translate-y-3.5 transform: translateY(0.875rem);
translate-x-4 transform: translateX(1rem);
translate-y-4 transform: translateY(1rem);
translate-x-5 transform: translateX(1.25rem);
translate-y-5 transform: translateY(1.25rem);
translate-x-6 transform: translateX(1.5rem);
translate-y-6 transform: translateY(1.5rem);
translate-x-7 transform: translateX(1.75rem);
translate-y-7 transform: translateY(1.75rem);
translate-x-8 transform: translateX(2rem);
translate-y-8 transform: translateY(2rem);
translate-x-9 transform: translateX(2.25rem);
translate-y-9 transform: translateY(2.25rem);
translate-x-10 transform: translateX(2.5rem);
translate-y-10 transform: translateY(2.5rem);
translate-x-11 transform: translateX(2.75rem);
translate-y-11 transform: translateY(2.75rem);
translate-x-12 transform: translateX(3rem);
translate-y-12 transform: translateY(3rem);
translate-x-14 transform: translateX(3.5rem);
translate-y-14 transform: translateY(3.5rem);
translate-x-16 transform: translateX(4rem);
translate-y-16 transform: translateY(4rem);
translate-x-20 transform: translateX(5rem);
translate-y-20 transform: translateY(5rem);
translate-x-24 transform: translateX(6rem);
translate-y-24 transform: translateY(6rem);
translate-x-28 transform: translateX(7rem);
translate-y-28 transform: translateY(7rem);
translate-x-32 transform: translateX(8rem);
translate-y-32 transform: translateY(8rem);
translate-x-36 transform: translateX(9rem);
translate-y-36 transform: translateY(9rem);
translate-x-40

 transform: translateX(10rem);
沿 X 軸平移 -40 transform: translateY(10rem);
沿 X 軸平移 -44 transform: translateX(11rem);
沿 X 軸平移 -44 transform: translateY(11rem);
沿 X 軸平移 -48 transform: translateX(12rem);
沿 X 軸平移 -48 transform: translateY(12rem);
沿 X 軸平移 -52 transform: translateX(13rem);
沿 X 軸平移 -52 transform: translateY(13rem);
沿 X 軸平移 -56 transform: translateX(14rem);
沿 X 軸平移 -56 transform: translateY(14rem);
沿 X 軸平移 -60 transform: translateX(15rem);
沿 X 軸平移 -60 transform: translateY(15rem);
沿 X 軸平移 -64 transform: translateX(16rem);
沿 X 軸平移 -64 transform: translateY(16rem);
沿 X 軸平移 -72 transform: translateX(18rem);
沿 X 軸平移 -72 transform: translateY(18rem);
沿 X 軸平移 -80 transform: translateX(20rem);
沿 X 軸平移 -80 transform: translateY(20rem);
沿 X 軸平移 -96 transform: translateX(24rem);
沿 X 軸平移 -96 transform: translateY(24rem);
沿 X 軸平移 1/2 transform: translateX(50%);
沿 X 軸平移 1/3 transform: translateX(33.333333%);
沿 X 軸平移 2/3 transform: translateX(66.666667%);
沿 X 軸平移 1/4 transform: translateX(25%);
沿 X 軸平移 2/4 transform: translateX(50%);
沿 X 軸平移 3/4 transform: translateX(75%);
沿 X 軸平移 full transform: translateX(100%);
沿 Y 軸平移 1/2 transform: translateY(50%);
沿 Y 軸平移 1/3 transform: translateY(33.333333%);
沿 Y 軸平移 2/3 transform: translateY(66.666667%);
沿 Y 軸平移 1/4 transform: translateY(25%);
沿 Y 軸平移 2/4 transform: translateY(50%);
沿 Y 軸平移 3/4 transform: translateY(75%);
沿 Y 軸平移 full transform: translateY(100%);

Tailwind CSS 平移類功能

  • translate-x-*： 該類用於水平平移元素特定值。 {*} 此處指定根據需要可以設定的不同平移值。
  • translate-y-*： 該類用於垂直平移元素特定值。 {*} 此處指定根據需要可以設定的不同平移值。

Tailwind CSS 變換示例

以下示例將演示元素的不同變換。

水平平移元素

以下示例說明了 translate-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 Translate Classes
    </h2>
    <div class="grid grid-cols-2 gap-3">
        <div class="border-2 bg-green-100">
            <div class="w-28 h-28 p-6 bg-green-500 text-center font-bold 
                        text-white text-center font-bold text-white  
                        hover:translate-x-1/2 duration-500 ">
                Hover: translate-x-1/2
            </div>
        </div>
        <div class="border-2 bg-green-100">
            <div class="w-28 h-28 p-6 bg-green-500 text-center font-bold 
                        text-white text-center font-bold text-white  
                        hover:translate-x-full duration-500 ">
                Hover: translate-x-full
            </div>
        </div>
    </div>
</body>
</html>

垂直平移元素

以下示例說明了 translate-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 Translate Classes
    </h2>
    <div class="grid grid-cols-2 gap-3">
        <div class="border-2 bg-green-100 h-56">
            <div class="w-28 h-28 p-6 bg-green-500 text-center font-bold 
                        text-white text-center font-bold text-white  
                        hover:translate-y-1/2 duration-500 ">
                Hover: translate-y-1/2
            </div>
        </div>
        <div class="border-2 bg-green-100">
            <div class="w-28 h-28 p-6 bg-green-500 text-center font-bold 
                        text-white text-center font-bold text-white  
                        hover:translate-y-full duration-500 ">
                Hover: translate-y-full
            </div>
        </div>
    </div>
</body>
</html>
列印頁面
上一頁
下一頁
廣告