Thuộc tính backface-visibility

Định nghĩa và sử dụng

Xác định bề mặt sau của thành phần khi thực hiện một chuyển động xoay.

Cấu trúc

tag {
    backface-visibility: giá trị;
    -webkit-backface-visibility: giá trị;
    -moz-backface-visibility: giá trị;
}

backface-visibility có các giá trị như sau:

Thuộc tính giá trị Ví dụ Mô tả
backface-visibility visible backface-visibility: visible; Hiển thị bề mặt sau, khi thực hiện hiệu ứng xoay.
hidden backface-visibility: hidden; Không hiển thị bề mặt sau, khi thực hiện hiệu ứng xoay.

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<p class="visible">visible</p>
<p class="hidden">hidden</p>
</body>
</html>

CSS viết:

p {
    background: #cc0000;
    height: 100px;
    width: 100px;
    position: relative;
    transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

Hiển thị trình duyệt khi chưa có backface-visibility:

visible

hidden

Thêm thuộc tính backface-visibility vào CSS:

p {
    background: #cc0000;
    height: 100px;
    width: 100px;
    position: relative;
    transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

.visible {
	backface-visibility: visible;
	-moz-backface-visibility: visible;
	-webkit-backface-visibility: visible;
}

.hidden {
	backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

Hiển thị trình duyệt khi có backface-visibility:

visible

hidden

Trình duyệt và hệ điều hành hỗ trợ

Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ cho thuộc tính backface-visibility:

  Trình duyệt PC Smartphone - Tablets
Internet Explorer Firefox Opera Chrome Safari IOS Android Window phone
backface-visibility X 14
-moz-
X 19
-webkit-
5.1
-webkit-
3.2
-webkit-
2.1
-webkit-
X