Khả năng hiển thị mặt sau - Thủ thuật CSS

Anonim

Các backface-visibilitybất động sản liên quan đến biến đổi 3D. Với chuyển đổi 3D, bạn có thể xoay một phần tử để những gì chúng tôi coi là “mặt trước” của phần tử không còn đối diện với màn hình. Ví dụ: điều này sẽ lật một phần tử khỏi màn hình:

.flip ( transform: rotateY(180deg); )

Nó sẽ trông giống như thể bạn dùng thìa và lật nó lên như một chiếc bánh kếp. Đó là bởi vì mặc định cho backface-visibilitylà visible. Thay vì nó hiển thị, bạn có thể ẩn nó.

.flip ( transform: rotateY(180deg); backface-visibility: hidden; )

Ví dụ đơn giản:

Xem Pen FjwGA của Chris Coyier (@chriscoyier) trên CodePen.

Điều này rất hữu ích khi thực hiện các hiệu ứng 3D. Ví dụ:

Làm việc cẩn thận

Trước sau

Sự cố trong WebKit vì khả năng hiển thị mặt sau không bị ẩn

Trước sau

Đây không phải là vấn đề trong Firefox vì bất kỳ lý do gì, mặc dù thuộc tính này hoạt động theo cùng một cách.

Tiền tố

Hỗ trợ Firefox 10+ và IE 10+ backface-visibilitykhông có tiền tố. Opera (post Blink, 15+), Chrome, Safari, iOS và Android đều cần -webkit-backface-visibility.

Giá trị

  • hiển thị (mặc định) - phần tử sẽ luôn hiển thị ngay cả khi không đối diện với màn hình.
  • ẩn - phần tử không hiển thị khi không đối diện với màn hình.
  • inherit - thuộc tính sẽ nhận giá trị từ phần tử cha của nó.
  • ban đầu - đặt thuộc tính thành mặc định của nó, đó là visible.

Thêm thông tin

  • Trình kiểm tra CSS 3D
  • Spec
  • Tài liệu Mozilla

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome Firefox I E Cạnh Safari
12 * 10 * 11 12 4*

Di động / Máy tính bảng

Chrome dành cho Android Android Firefox Android iOS Safari
88 85 3 * 3.2 *