Propriedade CSS backface-visibility
A propriedade backface-visibility define se a face traseira de um elemento é visível para o utilizador ou está oculta. Encontre alguns exemplos e experimente-os você mesmo.
A propriedade backface-visibility define se a face traseira de um elemento deve ser visível ou não. A face traseira é o lado de trás da caixa, visível quando o elemento é rodado 180 graus em torno do eixo Y. Se o elemento for rodado, pode optar por mostrar a face traseira ao utilizador ou ocultá-la. Esta propriedade aceita dois valores: visible e hidden.
A propriedade backface-visibility é uma das propriedades CSS3.
O valor visible torna a face traseira visível para o utilizador. O valor hidden oculta a face traseira.
| Valor inicial | visible |
|---|---|
| Aplica-se a | Elementos transformáveis. |
| Herdada | Não. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.backfaceVisibility = "hidden"; |
Sintaxe
Sintaxe de CSS backface-visibility
backface-visibility: visible | hidden | initial | inherit;Exemplo da propriedade backface-visibility com o valor "visible":
Exemplo de CSS backface-visibility com o valor visible
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.element {
width: 200px;
height: 200px;
background: #666;
color: #eee;
backface-visibility: visible;
transform-style: preserve-3d;
-webkit-animation: element 2s infinite linear alternate;
animation: element 2s infinite linear alternate;
}
@-webkit-keyframes element {
to {
-webkit-transform: rotateY(180deg);
}
}
@keyframes element {
to {
transform: rotateY(180deg);
}
}
</style>
</head>
<body>
<h2>Backface-visibility property example</h2>
<div class="element">
<h2>Hello world!</h2>
</div>
</body>
</html>Exemplo da propriedade backface-visibility com o valor "hidden":
Exemplo de CSS backface-visibility com o valor hidden
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.element {
width: 200px;
height: 200px;
background: #1c87c9;
color: #8ebf42;
backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-animation: element 2s infinite linear alternate;
animation: element 2s infinite linear alternate;
}
@-webkit-keyframes element {
to {
-webkit-transform: rotateY(180deg);
}
}
@keyframes element {
to {
transform: rotateY(180deg);
}
}
</style>
</head>
<body>
<h2>An example with hidden value</h2>
<div class="element">
<h2>Hello world!</h2>
</div>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| visible | A face traseira é visível. É o valor predefinido. | Experimente » |
| hidden | A face traseira não é visível. | Experimente » |
| initial | Define a propriedade com o seu valor predefinido. | |
| inherit | Herda a propriedade do seu elemento pai. |