Generatore di trasformatori CSS

Il CSS Transform Generator è un editor visivo per la proprietà di trasformazione CSS Sposti un cursore per ogni funzione di trasformazione - trasli, ruoti, ridimensiona, inclina e le funzioni 3D rotateX, rotateY e prospettiche - e guarda l'effetto applicare a un elemento di anteprima in tempo reale, quindi copia l'esatto CSS che produce Ti consente inoltre di impostare transform-origin, il punto di ancoraggio attorno a cui ruota e ruota la scala.

La proprietà transform riposiziona e rimodella un elemento senza disturbare il layout attorno ad esso. Un elemento tradotto, ruotato o in scala occupa ancora la sua casella originale nel flusso, quindi gli elementi vicini non si muovono, che è ciò che rende trasforma lo strumento corretto per gli effetti hover, le animazioni di ingresso e qualsiasi movimento che non dovrebbe innescare un riflusso. Diverse funzioni possono essere elencate in una dichiarazione e vengono applicate da destra a sinistra nello spazio delle coordinate dell'elemento, quindi l'ordine cambia realmente il risultato: traslare quindi ruotare sposta l'elemento e poi lo fa girare in posizione, mentre ruotare poi traslare fa girare prima gli assi e spegne l'elemento ad angolo.

Tutto accade nel tuo browser Inizia da un preset come Grow, Rotate, Flip o 3D Card, perfeziona ogni funzione e copia la dichiarazione Lo strumento scrive solo le funzioni che hai effettivamente cambiato, quindi non spedisci mai una scala ridondante (1) o ruoti (0deg) Nessun account, nessun caricamento e continua a funzionare offline una volta caricata la pagina.

Due dettagli risparmiano tempo di debug reale In primo luogo, le rotazioni 3D sembrano tridimensionali solo quando è presente una prospettiva - o una funzione di prospettiva () prima nella stessa trasformazione, come questa lo strumento lo emette, o una proprietà di prospettiva sul genitore - altrimenti ruotaY semplicemente schiaccia l'elemento piatto In secondo luogo, qualsiasi elemento con una trasformazione diversa da nessuna diventa un blocco di contenimento per i suoi discendenti fissi e posizionati in modo assoluto e crea un nuovo contesto di impilamento, esattamente come la proprietà del filtro Una posizione: figlio fisso all'interno di un genitore trasformato si ancora a quel genitore piuttosto che alla viewport, e l'ordinamento z-index che ha funzionato prima può cambiare Quando una trasformazione rompe un layout in un modo che non ha nulla a che fare con il suo aspetto, quel comportamento di blocco di contenimento è quasi sempre la ragione.