Generatore di trasformazioni CSS

Componi e copia una trasformazione 2D

1. Modifica la rotazione iniziale o aggiungi una funzione di trasformazione. Scegli le unità per la traduzione, abilita o disabilita le righe e duplicale o spostale nell'ordine scritto CSS.
2. Imposta l'origine X e Y in pixel o percentuali. Il riquadro del bordo campione misura 120 x 60 CSS pixel; i valori percentuali utilizzano le dimensioni originali prima della trasformazione.
3. Ispeziona l'attuale CSS e l'anteprima illustrativa, quindi utilizza Copia CSS. Le bozze attive non valide trattengono CSS e il target trasformato. Cancella rimuove le funzioni; Reset ripristina la rotazione iniziale e l'origine centrata.

Ordine, origine e dimensioni di riferimento

L'elenco è scritto nell'ordine CSS. Per un certo punto, la sua funzione più a destra agisce per prima. Spostare una rotazione prima o dopo una traslazione può quindi modificare il risultato anche quando entrambi i valori rimangono gli stessi.

L'output dichiara transform-box: border-box e l'origine della trasformazione corrente. La conversione percentuale e l'origine utilizzano il riquadro del bordo non trasformato dell'elemento, non il suo genitore, il fotogramma di anteprima o i suoi limiti trasformati.

I valori dell'origine dei pixel sono già distanze. Un'origine orizzontale del 50% sul campione si risolve come 120 pixel per 50 divisi per 100, ottenendo 60 pixel; verticalmente, 60 volte 50 diviso per 100 dà 30 pixel. Una dimensione target diversa modifica la geometria percentuale.

Nell'output rimane una funzione di identità esplicita. Può mantenere gli effetti di impilamento e blocco contenitore legati alla trasformazione anche quando i punti non si spostano. Un elenco vuoto o completamente disabilitato non ne emette invece alcuno.

Esempi di composizione

Con un'origine in alto a sinistra, translate(30px, -10px) rotate(90deg) mappa il punto di riferimento (4, 5) su (25, -6). La rotazione agisce sul punto antecedente alla traduzione scritta. Invertendo le righe si ottiene (5, 34).

Su un riquadro con bordo da 240 x 80 pixel, translate(-25%, 150%) significa uno spostamento di -60 e 120 pixel. Le percentuali vengono ancora risolte dalla casella prima di una rotazione circostante.

skew(45deg, -45deg) differisce da skewX(45deg) skewY(-45deg). La scala negativa può riflettere il campione, mentre la scala zero o un'altra trasformazione singolare può farlo scomparire senza rendere non valido lo CSS creato.

Limiti di ambito e anteprima

Questo è uno strumento di creazione 2D limitato. Non ha prospettiva, 3D, animazione, importazione CSS arbitraria, caricamento di immagini o calcolatore di matrice completa. Gli intervalli numerici e le tre cifre decimali rappresentano i limiti dello strumento anziché l'intera grammatica CSS.

L'anteprima può ridimensionare in modo uniforme il fotogramma fisso sulla scheda e ritagliare il contenuto all'esterno di quel fotogramma. Non si adatta a tutti i limiti trasformati. Il ridimensionamento del telaio, le guide e le dimensioni del campione non vengono aggiunti allo CSS copiato.

Le trasformazioni cambiano il disegno invece di riorganizzare il layout normale. Diverse dimensioni degli elementi, contenuto e CSS circostante possono modificare il risultato. Le composizioni estreme o quasi singolari dipendono anche dal rendering nativo in virgola mobile.

L'output preserva le righe, le unità e le identità esplicite abilitate, senza combinarle o convertirle in una matrice calcolata. L'input o l'origine attiva non valida trattiene CSS corrente e Copia invece di mostrare un ultimo risultato valido come corrente.

Stile locale senza cronologia salvata

Lo strumento non aggiunge alcun caricamento, cronologia di stile salvata, collegamento di input o telemetria contenente i valori creati. I servizi e le estensioni del sito esistenti non rientrano nella promessa universale di privacy. La copia è esplicita; un nuovo documento inizia con le impostazioni predefinite.