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.
backface-visibility	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

backface-visibility	X	14 -moz-	X	19 -webkit-	5.1 -webkit-	3.2 -webkit-	2.1 -webkit-	X

Link liên quan

appearance

background