Trasformazione CSS Translate | Spiegato

Durante lo sviluppo di qualsiasi applicazione, gli sviluppatori devono mantenere il design del sito Web attraente e interattivo. Per fare ciò, è possibile utilizzare diverse proprietà CSS, come transizione, animazione e molti altri. Più specificamente, il "trasformare"La proprietà posiziona l'elemento sull'asse X, l'asse Y e l'asse z.

Questo articolo spiegherà la proprietà CSS Transform con la funzione Value Translate ().

Scenario di esempio

Per la dimostrazione, creeremo due immagini impilate l'una sull'altra. Il primo sarà statico e leggermente opaco, mentre l'altro sarà mobile. Inoltre, il "trasformare"La proprietà viene applicata al secondo elemento in modo che si muova rispetto all'immagine opaca.

Passaggio 1: aggiungi immagini in HTML

In HTML, in primo luogo, crea un elemento div con il nome della classe "contenuto principale". All'interno di questo elemento Div, aggiungi un altro div con il nome della classe "MOVE-IMG". All'interno di questo elemento Div, aggiungi due elementi, ciascuno con attributi:

• "src"L'attributo specifica il percorso dell'immagine.
• "classe"Il valore dell'attributo viene aggiunto per accedere all'elemento pertinente in CSS.
• "Al"Specifica il testo che verrà visualizzato se l'immagine non riesce a caricare.
• "larghezza"La proprietà definisce la larghezza dell'elemento HTML aggiunto.

Ecco il codice HTML:

Passaggio 2: applicazione di CSS

Andiamo avanti per applicare le proprietà di stile CSS agli elementi HTML.

Elemento "corpo" di stile

corpo
Background-color: #B4CDE6;

IL "colore di sfondo"La proprietà viene applicata per impostare il colore di sfondo dell'elemento corporeo.

Stile "Move-IMG" Div

.move-img
Posizione: relativo;
larghezza: 300px;
Margine: auto;
margine-top: 40px;

IL "MOVE-IMG"L'elemento Div viene applicato con le seguenti proprietà CSS:

• "posizione"Proprietà con il valore"parente"Imposta la posizione dell'elemento rispetto alla sua posizione normale.
• "larghezza"La proprietà imposta la larghezza dell'elemento.
• "margine"La proprietà viene utilizzata per impostare l'altezza dell'elemento.
• "margine-top"La proprietà specifica lo spazio nella parte superiore del contenuto dell'elemento.

Stile "img-1" div

.img-1
Posizione: assoluto;
opacità: 0.12;

IL "IMG-1"Div è disegnato come segue:

• "posizione"Proprietà con il valore"assoluto"Posizionerà l'elemento rispetto all'elemento genitore posizionato più vicino.
• "opacità"Specifica la trasparenza dell'elemento.

Stile "IMG-2" Div

.img-2
Posizione: assoluto;

Allo stesso modo, abbiamo posizionato il "IMG-2"Div.

Produzione

Come trasformare la posizione dell'oggetto in HTML?

IL "trasformare"La proprietà ci consente di ruotare, inclinarsi, scala o tradurre un elemento. Più appositamente, il "tradurre()"La funzione regola la posizione dell'elemento sull'asse x, y e z. La funzionalità del "tradurre"La proprietà è la stessa di quella della funzione Translate () utilizzata con la proprietà Transform.

Quali sono i diversi valori di proprietà "trasforma"?

Esistono diversi valori di traduzione associati alla proprietà di trasformazione CSS:

• tradurre()
• TransLex ()
• Translatey ()
• Translatez ()
• traduzione3d ()

Dai un'occhiata all'esempio fornito per comprendere il loro utilizzo!

Esempio 1: usando "Translate ()" con proprietà "Transform"

IL "tradurre()"La funzione prende due valori dei parametri. Il primo rappresenta il valore dell'asse x e il secondo valore rappresenta l'asse y:

Transform: traduci (100px, 100px);

Si può osservare che, secondo i valori specificati, l'elemento viene riposizionato in orizzontale e verticalmente:

Esempio 2: usando "Translatex ()" con proprietà "Transform"

Per spostare l'oggetto in orizzontale, utilizzare il "TransLex ()" funzione. Di conseguenza, il valore positivo sposterà l'oggetto sul lato destro e il valore negativo sposterà l'oggetto sul lato sinistro:

trasformazione: traduzionex (100px);

Si può osservare che l'oggetto è stato spostato 100px a destra:

Esempio 3: usando "Translatey ()" con proprietà "Transform"

Per spostare l'oggetto verticalmente, usa il "Translatey ()" funzione. Secondo i suoi parametri, il valore positivo sposterà l'oggetto verso il basso e il valore negativo lo sposterà verso la parte superiore:

Transform: Translatey (90px);

Produzione

Esempio 4: usando "Translatez ()" con proprietà "Transform"

I traduttori () e Translatey () sono piuttosto semplici da capire mentre trasformano gli elementi in termini di asse x e asse y, rispettivamente. IL "Translatez ()"La funzione è in qualche modo complicata. L'asse X e l'asse Y spostano l'elemento in orizzontale o in verticale, mentre l'asse z sposta l'oggetto più vicino o lontano da te.

Passando valore positivo come parametro funzione Translatez ()

È possibile utilizzare la funzione Translatez () come segue:

Transform: prospettiva (200px) Translatez (50px);

Qui:

• "prospettiva()": Questa funzione definisce uno spazio virtuale tra lo schermo e l'elemento HTML.
• "Translatez ()": Questo valore positivo in questa funzione muove l'elemento più vicino a te, mentre il valore negativo si sposta l'elemento da te.

Si può osservare che ora l'immagine si avvicina allo schermo e sembra più grande:

Passando il valore negativo come parametro funzione Translatez ()

Ora, specifichiamo il valore negativo come parametro della funzione Translatez ():

Transform: prospettiva (200px) Translatez (-50px);

Il valore negativo ha spostato l'elemento lontano da noi:

Oggetto in movimento nella direzione 3-D

Per spostare l'oggetto in una direzione 3-D, utilizzare il “traduzione3d ()" funzione. Prende il valore come parametri di asse x, asse Y e asse z. Inoltre, il "prospettiva()"Il valore specifica lo spazio tra l'elemento e lo schermo in modo che l'immagine possa spostarsi in un piano 3D:

Trasformazione: prospettiva (500px) Translate3D (150px, 30px, 130px);

L'output rappresenta il movimento dell'oggetto in 3-D:

Si trattava solo di CSS Transform Property con la funzione Translate () in CSS.

Conclusione

CSS "trasformare"Proprietà con il valore"tradurre()"Posizionato gli elementi sull'asse X, l'asse Y e l'asse Z. Questi valori possono essere positivi o negativi. IL "TransLex ()" E "Translatey ()"Le funzioni hanno posizionato gli oggetti in orizzontale e verticalmente. IL "Translatez ()"La funzione sposta l'oggetto più vicino o lontano dallo schermo. È combinato con il "prospettiva()"Funzione, che specifica uno spazio tra lo schermo e l'elemento. Questo articolo ha dimostrato la proprietà CSS Transform con la funzione Translate ().