HTML(28)——Trasformazione spaziale

2024-07-12

Spazio: i tre assi delle coordinate XYZ definiti dall'angolo dell'asse delle coordinate formano uno spazio tridimensionale. La posizione dell'asse Z è la stessa della direzione della linea di vista.

trasformazione dello spazio

Padella

Attributi:

trasforma: translate3d(x,y,z);
trasformare: translateX();
trasformare: traduciY();
trasformare: translateZ();

Valore: valore/percentuale dell'unità pixel

Per impostazione predefinita non possiamo vedere la traslazione dell'asse Z

distanza di vista

Funzione: Specifica la distanza tra l'osservatore e il piano z=0, aggiungendo un effetto prospettico all'elemento

Effetto prospettico: quasi grande, molto piccolo, quasi reale e molto virtuale

Attributi:(Aggiunto al genitore, intervallo di valori 800-1200)

prospettiva: distanza di visione;


  <style>
    /*空间转换*/
    .father {
      perspective: 1000px;
 
    }
 
    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: blue;
      transition: all 0.5s;
    }
 
    .box:hover {
      transform: translateZ(-400px);
    }
  </style>
</head>
 
<body>
  <div class="father">
    <div class="box"></div>
  </div>
</body>

Quando il mouse è sospeso, viene prodotto un effetto quasi grande e molto piccolo e l'asse Z si sposta di -400 px.

ruotare

Regola della mano sinistra:

Attributo: Il valore positivo o negativo viene determinato in base al senso di rotazione. Tenere l'albero rotante con la mano sinistra, Il pollice punta nella direzione positiva.La direzione di piegatura delle altre dita è la direzione di rotazione positiva

trasformazione:ruotaZ(valore)

trasformazione:ruotaX(valore)

trasformazione:ruotaY(valore)

Condivisione della tecnologia