Biến đổi phong cách - Thủ thuật CSS

Các transform-stylebất động sản, khi áp dụng cho một phần tử, xác định nếu trẻ em đó là yếu tố được định vị trong không gian 3D, hoặc dẹt.

.parent ( transform-style: preserve-3d; )

Nó chấp nhận một trong hai giá trị: flat(mặc định) và preserve-3d. Để chứng minh sự khác biệt giữa hai giá trị, hãy nhấp vào nút chuyển đổi trong CodePen bên dưới:

Kiểm tra cây bút này!

Khi nút được nhấp, bản trình diễn sử dụng JavaScript để chuyển đổi transform-stylegiá trị giữa preserve-3dvà flat.

Như bạn có thể thấy, khi giá trị được thay đổi thành flat, các phần tử con không còn được xếp chồng lên nhau theo các translateZgiá trị (trong không gian 3D), mà thay vào đó sẽ được làm phẳng để xuất hiện theo cách các phần tử được mặc định trên trang HTML.