Generatore CSS Transform per persone pigre.
Imposta la scala, ruota, trasla e inclina e guarda l'anteprima dal vivo per ottenere la vista desiderata.
Evita di impostare valori estremi per la proprietà di inclinazione perché l'anteprima potrebbe coprire il pannello delle impostazioni. In questa situazione dovrai aggiornare la pagina.
Scala, ruota, trasla e inclina
La scala funziona come se ingrandissi e rimpicciolisci l'elemento mirato. Il valore di scala predefinito è 1, che funziona come moltiplicatore della dimensione originale. Ciò significa che 0,5 dimezza mentre 2 raddoppia la sezione.
Ruota l'elemento in senso orario con la seconda proprietà impostata in gradi. Ruotando di 180° l'oggetto viene capovolto mentre di 360° lo riporta nella sua posizione verticale originale. Imposta qualsiasi valore positivo o negativo o anche decimali.
Trasla sposta l'elemento con i pixel relativi alla sua posizione originale. Il valore X orizzontalmente mentre Y verticalmente quando c'è l'attributo di rotazione è zero.
Inclina gli oggetti sul loro asse orizzontale (X) o verticale (Y).
Spiegazione della trasformazione CSS
La proprietà Transform CSS consente di ruotare, ridimensionare, inclinare e tradurre un elemento. Modifica lo spazio delle coordinate del modello di formattazione visuale CSS.
Definizione e utilizzo
La proprietà di trasformazione applica una trasformazione 2D o 3D a un elemento. Questa proprietà consente di ruotare, ridimensionare, spostare, inclinare, ecc., gli elementi.
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
I numeri seguiti da -webkit-, -moz- o -o- specificano la prima versione che ha funzionato con un prefisso.
Sintassi
transform: none|transform-functions|initial|inherit;
