CSS perspective
La proprietà CSS3 perspective applica profondità 3D agli elementi figli
La proprietà perspective in CSS3 viene applicata al contenitore di uno o più elementi 3D. Imposta la distanza tra l'osservatore e il piano dell'elemento, creando un effetto di profondità quando vengono eseguite trasformazioni tridimensionali come rotateX, rotateY o translateZ.
Sintassi
Significato dei valori principali:
-
lunghezza: rappresenta la distanza (in
px,em, ecc.) tra l’osservatore e il piano Z. Più il valore è piccolo, maggiore sarà l'effetto prospettico (più “drammatico”). -
none: disattiva la prospettiva 3D, rendendo le trasformazioni 3D piatte.
Esempio proprietà: perspective
Codice Esempio: perspective
.perspective-container {
perspective: 600px;
width: 300px;
height: 200px;
margin: auto;
border: 1px solid #ccc;
}.box-3d {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #6a5acd, #00bfff);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
transform: rotateY(30deg);
transition: transform 0.5s ease-in-out;
}
Contenuto Esempio: perspective
Esempio di utilizzo di perspective in CSS3
Nel seguente esempio, un elemento ruota sull'asse Y con effetto prospettico applicato dal contenitore:
CSS e HTML dell’esempio con perspective:
<style>
.perspective-container {
perspective: 600px; /* Imposta la profondità */
width: 300px;
height: 200px;
margin: auto;
border: 1px solid #ccc;
}
.box-3d {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #6a5acd, #00bfff);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
transform: rotateY(30deg); /* Rotazione 3D sull'asse Y */
transition: transform 0.5s ease-in-out;
}
.perspective-container:hover .box-3d {
transform: rotateY(-30deg);
}
</style>
<div class="perspective-container">
<div class="box-3d">Ruota in 3D</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.108
