CSS backface-visibility
La proprietà CSS3 backface-visibility controlla la visibilità del lato posteriore durante la rotazione
La proprietà backface-visibility determina se il lato posteriore di un elemento è visibile durante le animazioni di rotazione. Il valore predefinito è visible, che mostra entrambi i lati dell'elemento. Tuttavia, utilizzando il valore hidden, il lato posteriore sarà nascosto quando l'elemento ruota, migliorando l'aspetto delle animazioni 3D, come nel caso di flipping o rotazioni.
Sintassi
Significato dei valori principali:
-
visible: il lato posteriore dell'elemento è visibile durante la rotazione (comportamento predefinito).
-
hidden: il lato posteriore dell'elemento è nascosto quando l'elemento è ruotato, utile per migliorare l'aspetto delle animazioni 3D.
Esempio proprietà: backface-visibility
Codice Esempio: backface-visibility
/* Definizione dell'effetto di rotazione */.flip-box {
width: 200px;
height: 200px;
perspective: 1000px; /* Imposta la prospettiva per l'animazione 3D */
}.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d; /* Mantiene gli elementi in 3D */
}.flip-box:hover .flip-box-inner {
transform: rotateY(180deg); /* Ruota l'elemento lungo l'asse Y */
}.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /* Nasconde il lato posteriore durante la rotazione */
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: white;
}.flip-box-front {
background-color: #50a14f;
}.flip-box-back {
background-color: #333;
transform: rotateY(180deg); /* Ruota il retro per renderlo inizialmente nascosto */
}
Contenuto Esempio: backface-visibility
Esempio di utilizzo di backface-visibility
In questo esempio, il lato posteriore dell'elemento sarà nascosto durante la rotazione grazie a backface-visibility: hidden:
CSS e HTML per l'animazione di rotazione:
<style>
.flip-box {
width: 200px;
height: 200px;
perspective: 1000px; /* Imposta la prospettiva per l'animazione 3D */
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d; /* Mantiene gli elementi in 3D */
}
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg); /* Ruota l'elemento lungo l'asse Y */
}
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /* Nasconde il lato posteriore durante la rotazione */
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: white;
}
.flip-box-front {
background-color: #50a14f;
}
.flip-box-back {
background-color: #333;
transform: rotateY(180deg); /* Ruota il retro per renderlo inizialmente nascosto */
}
</style>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
Front
</div>
<div class="flip-box-back">
Back (nascosto durante la rotazione)
</div>
</div>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
