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ị; } Thuộc tính: Thuộc tính giá trị Mô tả backface-visibility visible Hiển thị bề mặt sau, khi thực hiện hiệu ứng xoay. […]
Đị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ị;
}
Thuộc tính:
| Thuộc tính | giá trị | Mô tả |
|---|---|---|
| backface-visibility | visible | Hiển thị bề mặt sau, khi thực hiện hiệu ứng xoay. |
| 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:
visible
hidden
CSS viết:
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:
visible
hidden
Trình duyệt 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ợ:
| Trình duyệt PC | Smartphone – Tablets | |
| backface-visibility | Internet Explorer – Không hỗ trợ | IOS 3.2 (-webkit-) |
| Firefox 14 (-moz-) | Android 2.1 (-webkit-) | |
| Opera – Không hỗ trợ | Window Phone – Không hỗ trợ | |
| Google Chrome 19 (-webkit-) | ||
| Safari 5.1 (-webkit-) |
