English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'attributo backface-visibility del CSS3 determina se la 'parte posteriore' dell'elemento convertito è visibile quando è rivolto all'utente.
La seguente tabella riassume l'ambito di applicazione e la cronologia delle versioni di questo attributo.
| Valore predefinito: | visible |
|---|---|
| Applicabile a: | Elementi trasformabili |
| Ereditarietà: | Nessuno |
| Animabile: | No.Vedere: Proprietà animazione。 |
| Versione: | Nuova funzionalità CSS3 |
| Sintassi JavaScript: | object.style.backfaceVisibility="hidden" |
La sintassi di questa proprietà è la seguente:
backface-visibility: visible | hidden | initial | inherit
Il seguente esempio dimostra come utilizzare la proprietà backface-visibility.
.flip-container {
margin: 50px;
perspective: 1000px;
display: inline-block;
}
.flip-container:hover .card {
transform: rotateY(180deg);
}
.card, .front, .back {
width: 130px;
height: 195px;
}
.card {
position: relative;
transition: 0.5s all;
transform-style: preserve-3d;
}
.front, .back {
position: absolute;
backface-visibility: hidden;
}
.front {
z-index: 1;
transform: rotateY(180deg);
}
.back {
z-index: 2;
transform: rotateY(0deg);
}Prova a vedere <br/>Attenzione：L'attributo backface-visibility è molto utile per creare animazioni come rotazione di monete o ribaltamento di carte, dove due immagini diverse (cioè la parte anteriore e la parte posteriore) sono messe insieme per creare un migliore effetto di rotazione 3D.
La tabella sottostante descrive i valori di questa proprietà.
| Valore | Descrizione |
|---|---|
| visible | Specificare che la parte posteriore è visibile, permettere la visualizzazione dell'immagine riflessa della parte anteriore. Questo è il valore predefinito. |
| hidden | Specificare che la parte posteriore è invisibile, nascondere la parte anteriore. |
| initial | Imposta questa proprietà al suo valore predefinito. |
| inherit | Se specificato, l'elemento correlato adotta il valore calcolato dell'attributo backface-visibility del suo elemento padre. |
La compatibilità del browser dell'attributo backface-visibility, tutti i browser mainstream supportano questa proprietà.
|
Vedere i seguenti tutorial：Transizione CSS3，Transformazione 3D CSS3，Animazione CSS3。
Proprietà correlate：perspective，perspective-origin，transform，transform-origin，transform-style，transition。