Trasformazione-origine - Trucchi CSS

La transform-originproprietà viene utilizzata insieme alle trasformazioni CSS, consentendo di modificare il punto di origine di una trasformazione.

.box ( transform: rotate(360deg); transform-origin: top left; )

Come indicato sopra, la transform-originproprietà può richiedere fino a due parole chiave o valori di lunghezza separati da spazi per una trasformazione 2D e fino a tre valori per una trasformazione 3D.

Utilizzando il codice sopra su una casella di 200 x 200 px, con la trasformazione applicata a una transizione tramite un evento clic, si comporterebbe in questo modo:

Dai un'occhiata a questa penna!

Per impostazione predefinita, l'origine di una trasformazione è "50% 50%", che si trova esattamente al centro di un dato elemento. La modifica dell'origine in "in alto a sinistra" (come nella demo sopra) fa sì che l'elemento utilizzi l'angolo superiore sinistro dell'elemento come punto di rotazione.

I valori possono essere lunghezze, percentuali o le parole chiave top, left, right, bottom, e center.

Il primo valore è la posizione orizzontale, il secondo valore è la verticale e il terzo valore rappresenta la posizione sull'asse Z. Il terzo valore funzionerà solo se stai usando trasformazioni 3D e non può essere una percentuale.

Vedere l'illustrazione dell'origine della trasformazione della penna di Shaw (@shshaw) su CodePen.