Proprietà CSS backface-visibility
La proprietà backface-visibility definisce se la faccia posteriore di un elemento è visibile all'utente o nascosta. Trova alcuni esempi e provali tu stesso.
La proprietà backface-visibility definisce se la faccia posteriore di un elemento deve essere visibile o meno. La faccia posteriore è il lato posteriore del box, visibile quando l'elemento viene ruotato di 180 gradi attorno all'asse Y. Se l'elemento viene ruotato, puoi scegliere di mostrare la faccia posteriore all'utente o di nasconderla. Questa proprietà accetta due valori: visible e hidden.
La proprietà backface-visibility è una delle proprietà CSS3.
Il valore visible rende la faccia posteriore visibile all'utente. Il valore hidden nasconde la faccia posteriore.
| Valore iniziale | visible |
|---|---|
| Si applica a | Elementi trasformabili. |
| Ereditata | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.backfaceVisibility = "hidden"; |
Sintassi
Sintassi di CSS backface-visibility
backface-visibility: visible | hidden | initial | inherit;Esempio della proprietà backface-visibility con il valore "visible":
Esempio di CSS backface-visibility con il valore 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>Esempio della proprietà backface-visibility con il valore "hidden":
Esempio di CSS backface-visibility con il valore 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>Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| visible | La faccia posteriore è visibile. È il valore predefinito. | Provalo » |
| hidden | La faccia posteriore non è visibile. | Provalo » |
| initial | Imposta la proprietà al suo valore predefinito. | |
| inherit | Eredita la proprietà dall'elemento genitore. |