Tailwind CSS Perspective: Thêm Chuyển đổi 3D dễ dàng vào Trang web của Bạn

@kamona/tailwindcss-perspective

Một chút về các lớp tiện ích liên quan đến chuyển đổi 3D của CSS

Cài đặt

⚠️ Lưu ý rằng @kamona/tailwindcss-perspective chỉ hoạt động trong chế độ jit và chưa tương thích với tailwindcss v3.

Cài đặt plugin từ npm:

# Using npm
npm install -D @kamona/tailwindcss-perspective

# Using Yarn
yarn add -D @kamona/tailwindcss-perspective

Sau đó thêm plugin vào tệp tailwind.config.js của bạn:

// tailwind.config.js
module.exports = {
  mode: 'jit',
  theme: {
    // ...
  },
  plugins: [
    require('@kamona/tailwindcss-perspective'),
    // ...
  ],
}

Sử dụng Cơ bản

View the live examples

Read this tutorial to get familiar with 3d transformation in css

Các Ví dụ Cơ bản

<div class="perspective-9">
  <div class="w-40 h-40 p-4 bg-red-500 rotate-x-30 rotate-y-35 -rotate-z-20">
    <h2>3D transform</h2>
  </div>
</div>

Trước tiên, bạn cần thêm lớp perspective-* vào phần tử cha để kích hoạt không gian 3D cho các phần tử con của nó.

Tất cả các giá trị mặc định của rotate cũng có sẵn cho rotate-x, rotate-y, và rotate-z với thêm giá trị.

//
{
  rotate3d: (theme) => ({
    // default values
    // https://tailwindcss.com/docs/rotate
      ...theme('rotate'),
      // new values
      ...{
          '-60': '-60deg',
          '-50': '-50deg',
          '-40': '-40deg',
          '-35': '-35deg',
          '-30': '-30deg',
          '-25': '-25deg',
          '-20': '-20deg',
          '-15': '-15deg',
          '-10': '-10deg',
          10: '10deg',
          15: '15deg',
          20: '20deg',
          25: '25deg',
          30: '30deg',
          35: '35deg',
          40: '40deg',
          50: '50deg',
          60: '60deg',
      }
  }),
}
//

Tất cả các giá trị mặc định của translate-x và translate-y cũng có sẵn cho translate-z.

<div class="perspective-9">
  <div class="w-40 h-40 p-4 bg-red-500 translate-z-20 rotate-x-30 rotate-y-35 -rotate-z-20">
    <h2>3D transform</h2>
  </div>
</div>

Lớp transform-style-3d

Góc nhìn của một phần tử chỉ áp dụng cho các phần tử con trực tiếp. Để các phần tử con tiếp theo kế thừa góc nhìn của một phần tử cha và tồn tại trong cùng không gian 3D, phần tử cha có thể truyền góc nhìn của nó bằng transform-style: preserve-3d.

<div class="p-20">
  <div class="perspective-9">
    <!-- we need to add 'transform-style-3d' class to make its child live in the same 3d space -->
    <div class="w-40 h-40 p-4 bg-green-500 transform-style-3d rotate-x-30 rotate-y-35 -rotate-z-20">
      <div class="flex justify-end">
        <p
          class="p-2 translate-x-10 -translate-y-6 border border-black shadow-xl bg-white/70 translate-z-16 -rotate-x-10 -rotate-y-30 rotate-z-20"
        >
          3D transform
        </p>
      </div>
    </div>
  </div>
</div>

Gốc nhìn của góc nhìn.

Thông tin thêm sẽ sớm được cập nhật…

Chi tiết Tải về:

Tác giả: Kamona-WD
Nguồn: https://github.com/Kamona-WD/tailwindcss-perspective

Giấy phép: MIT license