Previous Lesson Next Lesson

Thuộc tính backface-visibility trong CSS3

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