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: 此类用于将元素的变换原点设置为左上角。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 变换原点示例

以下示例将说明基于指定的原点的元素的不同变换。

示例

Open Compiler
<!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>

示例

Open Compiler
<!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>

示例

Open Compiler
<!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>
广告