CSS perspective-origin
La proprietà CSS3 perspective-origin definisce il punto di vista della prospettiva
La proprietà perspective-origin in CSS3 specifica da quale punto del contenitore l'utente osserva la trasformazione 3D. Modificando i valori X e Y si può cambiare l’angolo visivo e l’effetto prospettico dell’elemento trasformato. È spesso utilizzata insieme a perspective per ottenere un controllo più realistico sulle animazioni e sugli effetti 3D.
Sintassi
Significato dei valori principali:
-
x: la posizione orizzontale del punto di vista, può essere espressa in
%,px,left,center,right. -
y: la posizione verticale del punto di vista, può essere espressa in
%,px,top,center,bottom. -
Default:
50% 50%, cioè il centro del contenitore.
Esempio proprietà: perspective-origin
Codice Esempio: perspective-origin
.perspective-origin-container {
perspective: 600px;
perspective-origin: left center;
width: 300px;
height: 200px;
margin: auto;
border: 2px dashed #666;
}.box-3d-origin {
width: 100%;
height: 100%;
background: linear-gradient(to bottom right, #ff8c00, #ff69b4);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
transform: rotateY(30deg);
transition: transform 0.6s, perspective-origin 0.6s;
}
Contenuto Esempio: perspective-origin
Esempio di utilizzo di perspective-origin in CSS3
In questo esempio, il punto di vista cambia tra sinistra e destra al passaggio del mouse, modificando la percezione della rotazione 3D:
CSS e HTML per perspective-origin:
<style>
.perspective-origin-container {
perspective: 600px;
perspective-origin: left center;
width: 300px;
height: 200px;
margin: auto;
border: 2px dashed #666;
}
.box-3d-origin {
width: 100%;
height: 100%;
background: linear-gradient(to bottom right, #ff8c00, #ff69b4);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
transform: rotateY(30deg);
transition: transform 0.6s, perspective-origin 0.6s;
}
.perspective-origin-container:hover {
perspective-origin: right center;
}
.perspective-origin-container:hover .box-3d-origin {
transform: rotateY(-30deg);
}
</style>
<div class="perspective-origin-container">
<div class="box-3d-origin">Prospettiva dinamica</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.221
