Thuộc tính perspective trong CSS

Thuộc tính perspective trong CSS

Thuộc tính perspective trong CSS

Thuộc tính perspective CSS phối cảnh cung cấp cho một phần tử một không gian 3D bằng cách ảnh hưởng đến khoảng cách giữa mặt phẳng Z và ngư...
Comment tháng 10 24, 2021

Thuộc tính perspective CSS phối cảnh cung cấp cho một phần tử một không gian 3D bằng cách ảnh hưởng đến khoảng cách giữa mặt phẳng Z và người dùng.

Độ mạnh của hiệu ứng được xác định bởi giá trị. Giá trị càng nhỏ, bạn càng đến gần mặt phẳng Z và hiệu ứng hình ảnh càng ấn tượng. Giá trị càng lớn, hiệu quả sẽ càng tinh tế.

Quan trọng: Xin lưu ý rằng thuộc tính phối cảnh không ảnh hưởng đến cách phần tử được hiển thị; nó chỉ đơn giản là tạo ra một không gian 3D cho các yếu tố trẻ em. Đây là sự khác biệt chính giữa hàm biến đổi: quan điểm () và thuộc tính phối cảnh. Phần đầu tiên cung cấp chiều sâu của phần tử trong khi phần sau tạo ra một không gian 3D được chia sẻ bởi tất cả các phần tử con đã biến đổi của nó.

.parent {
    perspective1000px;
  }
  
  .child {
    transformrotateY(50deg);
  }

 Ví dụ perspective CSS

HTML

<div class="parent perspective">
                <h1>Using perspective property on parent</h1>
                <div class="child"></div>
                <div class="child"></div>
                <div class="child"></div>
                <div class="child"></div>
                <div class="child"></div>
                <div class="child"></div>
                <div class="child"></div>
                <div class="child"></div>
                <div class="child"></div>
              </div><!--
              
              --><div class="parent transform">
                <h1>Using transform: perspective() on children</h1>
                <div class="child"></div>
                <div class="child"></div>
                <div class="child"></div>
                <div class="child"></div>
                <div class="child"></div>
                <div class="child"></div>
                <div class="child"></div>
                <div class="child"></div>
                <div class="child"></div>
              </div>

CSS

* {
    box-sizingborder-box;
  }
  
  body {
    font-size20px;
  }
  
  .parent {
    width50%;
    displayinline-block;
    padding.5em;
  }
  
  .parent.perspective {
    perspective50em;
  }
  
  .child {
    margin.5em;
    width3em;
    height3em;
    backgroundtomato;
    displayinline-block;
    border1px solid rgba(0,0,0,.5);
  }
  
  .parent.perspective .child {
    transformrotateX(50deg);
    backgroundtomato;
  }
  
  .parent.transform .child {
    transformperspective(50emrotateX(50deg);
    backgrounddeepskyblue;
  }
  
  h1 {
    font-size1em;
  }

Kết quả:

 
 
Bản demo trên nhằm mục đích chỉ ra sự khác biệt giữa chức năng và thuộc tính.

Ở phía bên trái, bạn có thể thấy thuộc tính được áp dụng cho cấp độ gốc (perspective: 50em) của các phần tử được biến đổi (transform: rotateY(50deg))
Ở phía bên phải, phối cảnh được áp dụng từ biến đổi trực tiếp trên child(transform: perspective(50em) rotateY(50deg)).
Điều này cho thấy cách thiết lập quan điểm về cha mẹ khiến tất cả trẻ em chia sẻ cùng một không gian 3D và do đó, cùng một điểm biến mất.
Xem thêm: Tìm hiểu thuộc tính justify-content css

Hãy thử điều gì đó thú vị hơn: một khối lập phương với các phép biến đổi và phối cảnh 3D. 
Cú pháp
  • perspective: none | <length>;
  • Initial value: none
  • Applies to: transformable elements
  • Inherited: no
  • Percentages: n/a
  • Computed value: the keyword none or an absolute length
  • Animation type: by computed value

    Blogger Comments


    Không có nhận xét nào. Chúc mừng bạn là người đầu tiên.

  • Kí tự đặc biệt
  • Tôi Share
  • Star Mạnh Blog
  • Văn Tuấn Blog
  • Tuổi Trẻ IT
  • Văn Thắng Blog
  • Duy Blogs
  • Star Sinh Blog
  • Lê Bá Long IT
  • Đặt liên kết
  • Đặt liên kết
  • Đặt liên kết