CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

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

perspective: lunghezza | none;

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

CODE: CSSpreleva codice
  1. .perspective-container {
  2.   perspective: 600px;
  3.   width: 300px;
  4.   height: 200px;
  5.   margin: auto;
  6.   border: 1px solid #ccc;
  7. }
  8.  
  9. .box-3d {
  10.   width: 100%;
  11.   height: 100%;
  12.   background: linear-gradient(135deg, #6a5acd, #00bfff);
  13.   color: white;
  14.   display: flex;
  15.   align-items: center;
  16.   justify-content: center;
  17.   font-size: 24px;
  18.   transform: rotateY(30deg);
  19.   transition: transform 0.5s ease-in-out;
  20. }

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:


Ruota in 3D

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

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies