La prima volta un rotateY Ero sicuro che avrei inclinato una carta nello schermo, invece l'ho schiacciata, ho perso la parte migliore di un pomeriggio prima di capire perché. Non c'era prospettiva. Avevo scritto la rotazione ma non l'unica funzione che fa leggere una rotazione come profondità, e i CSS hanno fatto esattamente quello che gli ho detto piuttosto che quello che intendevo. Quel pomeriggio è l'intero motivo per cui ora costruisco trasformazioni trascinando i cursori e guardando una casella rispondere, invece di digitare un valore, risparmiare, rinfrescarsi e strizzare gli occhi.
Il CSS transform la proprietà è una delle cose più utili nella lingua e una delle più facili da sbagliare sottilmente Si muove, gira, scala e inclina un elemento senza disturbare nulla intorno ad esso, motivo per cui ogni effetto hover, ogni sollevamento di carte, ogni animazione di ingresso si appoggia su di esso Ma racchiude un sacco di comportamento in una breve stringa, l'ordine delle funzioni cambia il risultato e le funzioni 3D hanno una dipendenza che è invisibile fino a quando non lo colpisci Un valore che puoi vedere essere costruito vale molto più di un valore che devi immaginare.
la Generatore di trasformatori CSS ti offre un cursore per ogni funzione, traslare, ruotare, scalare, inclinare e il trio 3D di rotateX, rotateY e prospettiva, e applica ogni modifica a un elemento di anteprima live mentre lo fai Ti consente inoltre di impostare l'origine di trasformazione, il punto di ancoraggio attorno al quale ruotano le rotazioni e il ridimensionamento La dichiarazione esatta si trova in una casella pronta per la copia qui sotto, contenente solo le funzioni che hai toccato.
tl; dr: Il CSS
transformle proprietà riposizionano e rimodellano un elemento senza influire sul layout della pagina, che è ciò che lo rende lo strumento giusto per gli effetti di passaggio al mouse e l'animazione Le funzioni si applicano da destra a sinistra, quindi l'ordine conta; le rotazioni 3D hanno bisogno di unperspective()per guardare tridimensionale; e qualsiasi elemento trasformato diventa un blocco di contenimento per i suoi figli fissi e assoluti Questo generatore espone ogni funzione con un'anteprima live, emette solo le funzioni che si cambiano, e produce CSS pulito si può incollare direttamente in un foglio di stile Funziona interamente nel browser senza iscrizione.
Che problema risolve un generatore di trasformate CSS?
la transform la proprietà è astratta allo stesso modo in cui CSS Grid è astratta Non stai spostando direttamente i pixel; stai descrivendo un'operazione geometrica e lasciando che il browser calcoli il risultato. translateX(40px) rotate(15deg) scale(1.1) è un'istruzione precisa, ma non c'è modo di sentire il risultato di concatenare quei tre dal solo testo Devi renderla E renderla nel tuo progetto significa il ciclo write-save-refresh, che è abbastanza lento che la maggior parte delle persone smetta di sperimentare molto prima di aver trovato il valore che desidera.
Un generatore collassa che fa il loop a zero Trascini il cursore di rotazione e la scatola gira in tempo reale Alzi la scala e cresce dal suo centro Aggiungi una traduzione e questa scorre mantenendo il suo turno Dieci minuti di questo e il rapporto tra i numeri e il movimento smette di essere qualcosa che traduci nella tua testa e diventa qualcosa che senti Quando hai finito, non c'è nulla da trascrivere, perché il CSS funzionante è stato scritto per te per tutto il tempo.
C'è un secondo vantaggio che conta più di quanto sembri Costruire la trasformazione mediante manipolazione significa che lo strumento può emettere sempre e solo CSS validi e ben formati Non è possibile produrre un rotto transform value trascinando un cursore, in modo che l'output sia sempre sicuro da incollare Tale affidabilità è il motivo per cui tengo uno scaffale di builder CSS visivi vicino, lo stesso motivo per cui raggiungo il generatore box-shadow piuttosto che contare gli offset delle ombre a mano.
Perché l'ordine delle funzioni di trasformazione è importante?
Questo è il singolo dettaglio che fa inciampare di più le persone, e vale la pena capirlo piuttosto che lavorarci sopra Quando elenchi diverse funzioni in una transform, il browser li applica da destra a sinistra, ognuno operante nello spazio delle coordinate lasciato dal precedente. Ciò significa che l'ordine cambia realmente dove finisce l'elemento.
Prendere translateX(100px) rotate(45deg) contro rotate(45deg) translateX(100px). Nel primo, l'elemento viene traslato di cento pixel e poi ruotato in posizione, quindi si trova un centinaio di pixel a destra e girato di quarantacinque gradi Nel secondo, avviene prima la rotazione, che fa girare gli assi delle coordinate element's, e la traslazione poi lo sposta di un centinaio di pixel lungo il ruotato Asse X, inviandolo diagonalmente verso il basso e verso destra Stesse due funzioni, stessi due valori, posizioni completamente diverse.
Il generatore emette le sue funzioni in un ordine deliberato, prima la prospettiva, poi la traduzione, poi la rotazione, poi la scala, poi l'inclinazione, che è un'impostazione predefinita sensata che mantiene i casi comuni che si comportano in modo intuitivo Ma una volta che si capisce che l'ordine è significativo, si capisce anche perché copiare una trasformazione da un luogo all'altro a volte produce un risultato che non ti aspettavi: hai spostato la stringa ma non il modello mentale dietro di essa Costruirlo da solo, e vedere ogni funzione's contributo, è come quel modello viene costruito.
Come faccio a far sembrare 3D una trasformazione 3D?
Ecco la trappola che mi costò quel pomeriggio Le funzioni rotateX e rotateY gira un elemento attorno agli assi orizzontale e verticale, che dovrebbe inclinarlo verso o lontano da te come se girasse una pagina Ma per impostazione predefinita non c'è profondità nella scena, quindi la rotazione viene proiettata direttamente sul piano piatto dello schermo e l'elemento sembra semplicemente comprimersi. UN rotateY(60deg) senza prospettiva sembra che l'elemento si sia ristretto, non che sia girato.
L'ingrediente mancante è perspective, e ci sono due modi per fornirlo Puoi mettere un perspective proprietà sull'elemento genitore, che stabilisce un punto di fuga condiviso per tutti i suoi figli 3D, oppure è possibile aggiungere un perspective() funzione all'inizio dell'elemento's proprio transform, che dà a quell'elemento la propria profondità Questo generatore utilizza il secondo approccio: impostare il cursore prospettico ed emette perspective() prima nella catena, esattamente dove deve essere Valori più piccoli, da qualche parte tra i trecento e i seicento pixel, posizionano il punto di fuga vicino all'elemento e rendono drammatica la profondità; valori più grandi appiattiscono l'effetto verso una leggera inclinazione.
La 3D Card preimpostata nello strumento è il modo più veloce per vedere questo Imposta una prospettiva di seicento pixel e un rotateY di venticinque gradi, e la casella di anteprima si inserisce in modo convincente nello schermo Riporta il cursore prospettico a zero e guarda la stessa rotazione collassare in una zucca piatta Quel prima e dopo è l'intera lezione in due trascinamenti.
Cosa fa transform-origin?
Ogni rotazione e ogni scala hanno bisogno di un punto fisso su cui ruotare, e quel punto è l'origine della trasformazione. Per impostazione predefinita si trova al punto morto dell'elemento, motivo per cui non è modificato rotate gira una scatola al centro e una non modificata scale lo fa crescere verso l'esterno in ogni direzione contemporaneamente. Muovi l'origine ed entrambi i comportamenti cambiano.
Impostare l'origine su top left e una rotazione diventa un'oscillazione, l'elemento che ruota dal suo angolo in alto a sinistra come un segno incernierato Impostalo su bottom e un scaleY fa crescere l'elemento verso l'alto dalla sua base anziché espanderlo simmetricamente, che è esattamente ciò che si desidera per una barra che dovrebbe salire dall'asse di un grafico Il generatore offre tutte e nove le posizioni delle parole chiave, il centro, i quattro bordi e i quattro angoli, e aggiorna l'anteprima nell'istante in cui ne scegli una, quindi la differenza tra un giro e un'oscillazione è di un clic l'uno dall'altro.
Questa è una di quelle proprietà che è quasi invisibile fino a quando non ne hai bisogno, e poi è l'unica cosa che produce l'effetto che stai cercando Un menu che dovrebbe aprirsi dal suo bordo superiore, un tooltip che dovrebbe scalare fuori dall'elemento a cui appartiene, una carta che dovrebbe ruotare attorno a un angolo piuttosto che al suo centro, tutti sono di origine trasformata e nessuno di essi è evidente dall'elemento transform valore solo.
Perché la trasformazione non spinge in giro altri elementi?
Una delle proprietà più utili di transform è anche quello che le persone trovano più sorprendente la prima volta che li morde Un elemento trasformato non influisce sul layout attorno ad esso Quando si traduce una casella di quaranta pixel a destra, rende quaranta pixel a destra, ma riserva comunque il suo spazio originale nel flusso del documento, quindi nient'altro si muove per colmare il divario e nulla viene messo da parte Trasformare è un effetto di tempo di verniciatura, applicato dopo che il layout è già stato calcolato.
Questa è una caratteristica, non un bug, ed è proprio ciò che rende trasformare lo strumento corretto per l'animazione Perché spostare un elemento con transform non attiva un riflusso, il browser può comporre la modifica sulla GPU e mantenere l'animazione a sessanta fotogrammi al secondo Spostando lo stesso elemento con top oppure left oppure margin costringe il browser a ricalcolare il layout su ogni singolo fotogramma, che è la causa più comune di animazione che balbetta e rilascia fotogrammi Se desideri un movimento fluido, animi transform e opacity, e lasci stare le proprietà del layout Quando hai bisogno del contenuto circostante per rifluire, questo è un segno che desideri un cambiamento di layout piuttosto che una trasformazione e uno strumento come il generatore flexbox o il Generatore di rete CSS è il posto giusto per iniziare.
Perché un bambino fisso si è rotto dentro il mio elemento trasformato?
Questo è il gotcha che sembra un bug in qualcosa di non correlato, e vale la pena saperlo prima che ti costi un'ora La specifica dice che qualsiasi elemento con un transform valore diverso da none diventa un blocco contenente per i suoi discendenti che sono posizionati fixed oppure absolute, e crea anche un nuovo contesto di impilamento Entrambi hanno conseguenze che emergono lontano dalla trasformata stessa.
Il cambiamento del blocco di contenimento è quello che sorprende le persone. UN position: fixed si suppone che l'elemento si ancora alla finestra, rimanendo inserito mentre la pagina scorre. Ma se un antenato di quell'elemento fisso ha una trasformazione, l'elemento fisso si ancora quell'antenato invece, e all'improvviso il tuo & quot;fixed" header scorre via con il contenuto o il tuo modale è intrappolato all'interno di una carta Niente riguardo l'aspetto di transform's accenna a questo; l'elemento sembra a posto, e qualcosa di tre livelli giù si posiziona in modo sbagliato Quando un elemento fisso o assoluto si comporta come se fosse intrappolato, la prima cosa da controllare è se un antenato porta una trasformazione Il cambiamento di contesto di impilamento provoca una classe parallela di confusione, dove un z-index quello che funzionava improvvisamente no, perché l'elemento trasformato sigillava i suoi figli nel proprio strato di impilamento. Lo stesso identico comportamento vale per il filter proprietà, per questo il Generatore di filtri CSS porta lo stesso avvertimento.
Quali funzioni copre il generatore e quando raggiungi ciascuna?
Lo strumento espone l'insieme completo delle funzioni di trasformazione comuni e aiuta a sapere a cosa servono ciascuna piuttosto che trascinarle a caso. Ecco la mappa.
| Funzione | Quello che fa | Uso tipico |
|---|---|---|
translateX / translateY |
Sposta l'elemento lungo un asse | Ingressi scorrevoli, spinte al volo stazionario, posizionamento offset |
rotate |
Gira l'elemento attorno al suo centro (2D) | Distintivi inclinati, caricatori rotanti, angoli di volo giocosi |
scale (X e Y) |
Cresce o restringe l'elemento | Zoom al passaggio del mouse, effetti pop, feedback a pressione |
skewX / skewY |
Inclina l'elemento lungo un asse | Banner dinamici, forme in stile corsivo, segnali di movimento |
rotateX / rotateY |
Gira l'elemento nello spazio 3D | Capovolgimenti di carte, pannelli inclinabili, effetti di copertura-flusso |
perspective |
Aggiunge profondità in modo che le rotazioni 3D vengano lette correttamente | Sempre abbinato a rotateX o rotateY |
Le due che hanno bisogno di un partner sono le rotazioni 3D, che non fanno nulla di convincente senza prospettiva, e una scala negativa, che vale la pena richiamare perché non è ovvia Impostazione scaleX a un valore negativo capovolge l'elemento orizzontalmente, come uno specchio, che è il modo in cui funziona il preset Flip Horizontal È un trucco genuinamente utile, che rispecchia un'icona piuttosto che esportare una seconda risorsa, e cade direttamente dal controllo della scala una volta che sai che i valori negativi sono consentiti.
Come fa il generatore a mantenere onesta l'anteprima?
La modalità di guasto di qualsiasi costruttore visivo è deriva tra ciò che l'anteprima mostra e ciò che il codice esportato produce Uno strumento che rende la sua anteprima in un modo e scrive il suo CSS un altro è peggio di nessun strumento a tutti, perché ti insegna un valore che non si riprodurrà Questo generatore evita che costruendo il preview's inline style e la dichiarazione copiata dalla stessa funzione, quindi quello che vedi è letteralmente quello che incolli Non c'è un secondo percorso del codice che potrebbe non essere d'accordo.
Anche per questo l'output contiene solo le funzioni che hai cambiato Uscire scale alla sua identità di uno, o rotate a zero, significa che tali funzioni sono semplicemente assenti dalla stringa anziché scritte come ridondanti scale(1) rumore Una trasformazione pulita è quella che puoi leggere a colpo d'occhio e fidarti, e emettere solo funzioni significative è la stessa disciplina su cui mi affido attraverso gli strumenti CSS visivi, dal generatore gradiente al costruttore box-shadow Se stai assemblando un kit più ampio, il Toolkit per sviluppatori web raccoglie quelli che apro più spesso, e le abitudini dietro usarli bene sono nel Strumenti di produttività per sviluppatori guida.
Quali browser supportano le trasformate CSS?
Le trasformate CSS sono supportate in ogni browser attuale e lo sono da ben oltre un decennio Le funzioni 2D, translate, rotate, scale e skew, sono universali e non fissate, e le funzioni 3D insieme a perspective sono ugualmente ben supportati in Chrome, Firefox, Safari e Edge Il vecchio -webkit- e -moz- i prefissi che una volta erano necessari sono oggi un peso morto in un foglio di stile e l'output di questo generatore è standard, CSS non prefissato che puoi spedire come scritto Per le regole autorevoli, le specifiche CSS Transforms Module Level 1 e Level 2 del W3C sono le fonti primarie, e vale la pena leggerle una volta che il generatore ti ha dato l'intuizione di seguirle.
Se stai costruendo un kit di strumenti visivi più ampio insieme a questo, il generatore border-radius e il costruttore di transizione sono compagni naturali, dal momento che una trasformazione in hover vuole quasi sempre una transizione per lisciarlo Tutto qui funziona lato client, e il CSS che copi è tuo da usare senza runtime, senza fase di compilazione e senza dipendenza.
Domande frequenti
Che cosa è un generatore di trasformazione CSS?
Un generatore di trasformazione CSS è uno strumento visivo che crea un valore di trasformazione CSS dalle impostazioni scelte Si regola la prospettiva di traduzione, rotazione, scala, inclinazione e 3D con i cursori, e restituisce la dichiarazione di trasformazione insieme a un'anteprima live del risultato.
L'ordine delle funzioni di trasformazione è importante?
Sì. Le funzioni vengono applicate da destra a sinistra nel sistema di coordinate dell'elemento, quindi traslare e poi ruotare non è la stessa cosa di ruotare e poi traslare. La traduzione prima sposta l'elemento e poi lo fa girare in posizione; ruotando prima si girano gli assi, quindi una traslazione successiva lo spedisce ad angolo.
Come faccio a far sembrare 3D una trasformazione CSS?
Una rotazione 3D ha bisogno di prospettiva per leggere come profondità Aggiungere una funzione di prospettiva () all'inizio della trasformazione, che questo generatore emette quando si imposta il cursore di prospettiva, o mettere una proprietà di prospettiva sull'elemento padre Valori intorno a 300 a 600 pixel rendono la profondità più drammatica.
Cosa fa transform-origin?
transform-origin imposta il punto attorno al quale ruota e scala una trasformazione. L'impostazione predefinita è il centro dell'elemento. Spostalo in un angolo e una rotazione diventa un'oscillazione da quell'angolo; spostalo su un bordo e il ridimensionamento cresce da quel bordo anziché verso l'esterno in ogni direzione.
Perché transform non sposta altri elementi sulla pagina?
La trasformazione è un effetto del tempo di verniciatura L'elemento esegue il rendering nella sua nuova posizione ma riserva comunque la sua casella originale nel layout, quindi nulla intorno ad esso cambia Questo è ciò che rende la trasformazione ideale per l'animazione e perché usi il margine, la posizione o una proprietà di layout quando hai bisogno di contenuti da rifluire.
Perché un bambino fisso o assoluto si spezza all'interno di un elemento trasformato?
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 Una posizione: figlio fisso quindi si ancora al genitore trasformato invece che alla viewport, e l'ordinamento z-index può cambiare Sposta il bambino all'esterno dell'elemento trasformato se deve rimanere fisso allo schermo.
Devo animare la trasformazione invece di cima, sinistra, larghezza o altezza?
Sì, per un movimento fluido Trasformata e opacità sono composte sulla GPU e non attivano il layout, quindi si animano a 60 fps Animare in alto, a sinistra, larghezza o altezza costringe il browser a ricalcolare il layout su ogni fotogramma, che è la solita causa dell'animazione stravagante.
Il CSS di trasformazione generato è libero e sicuro da usare?
Sì. Lo strumento è completamente gratuito senza limiti di iscrizione o di utilizzo ed emette CSS standard e non prefissati supportati in ogni browser moderno. Tutta l'elaborazione avviene nel tuo browser, quindi non viene caricato nulla e lo strumento funziona offline una volta caricato.
