Trasforma CSS: teoria ed esempi di trasformazione di oggetti

La terza versione di fogli di stile a cascata ha introdotto nuove proprietà per gli oggetti di pagine Web. Questa è la possibilità di creare blocchi con angoli smussati, regolare le ombre, aggiungere trasparenza e sfumatura, impostare l'animazione. Quest'ultimo è degno di nota in modo più dettagliato. Se in precedenza, per creare l'illusione del movimento, alle pagine venivano aggiunti file gif, che dovevano essere disegnati appositamente, quindi ora l'attributo CSS trasformazione esegue tutte le azioni per animare automaticamente gli oggetti. Resta da imparare come usarlo.

Caratteristiche della proprietà

Di solito, gli oggetti vengono utilizzati quando si trasforma un mouse. È impostato per una pseudo classe chiamata : hover . Le modifiche riguardano solo un elemento della pagina Web, senza influenzare il resto.

Il parametro considerato degli stili è spesso confuso con un altro - text-transform . I CSS distinguono chiaramente tra questi attributi. Quest'ultimo definisce lo stile di scrittura del testo e si applica solo ai paragrafi della pagina Web, mentre la trasformazione nella sua forma pura viene utilizzata per tutti gli elementi.

Puoi aggiungere a qualsiasi oggetto:

• muoversi lungo una linea retta (orizzontale, verticale, diagonale);
• rotazione (caso speciale - inclinazione);
• scala;
• combinazione degli effetti elencati

Oltre all'illusione del movimento di tre tipi, la proprietà consente di impostare il riflesso, lo spostamento e la prospettiva. Per avanzato, il parametro è dato sotto forma di una matrice.

La trasformazione viene eseguita rispetto al centro dell'elemento. Se necessario, il punto di riferimento viene spostato. Il parametro transform-origin: a b c sposta il centro dell'oggetto rispetto al sistema di coordinate xyz tridimensionale.

Movimento orizzontale

Il tipo più semplice di movimento è orizzontale, cioè sinistra-destra o lungo l'asse x . Per impostarlo, usa il valore della proprietà translate ( x, y) .

Poiché l'elemento deve muoversi solo in una direzione, la coordinata y è impostata su y = 0. Ma alla coordinata x dovrebbe essere assegnato un valore specifico in pixel per il quale l'oggetto dovrebbe essere spostato. Valore negativo - movimento a sinistra, positivo - a destra.

Ma semplicemente specificare la trasformazione CSS non creerà l'illusione del movimento. La soluzione è aggiungere l'attributo di transizione alla descrizione dell'oggetto. Di seguito è mostrato un esempio di lavoro per spostare un elemento di 125 pixel a destra.

Il codice di transizione della linea : tutti i 2 s easy-in- out significano:

• tutto - il valore impostato viene applicato a tutti i parametri dell'oggetto;
• 2 s - durata dell'effetto 2 secondi;
• easy-in out - slow motion all'inizio e alla fine.

Sposta giù

Il valore translate ( x, y) viene utilizzato per impostare l'animazione verticalmente. In questo caso, la coordinata x è uguale a zero e a y viene assegnata la grandezza dello spostamento. Salire è un valore negativo, in basso è un valore positivo.

La proprietà CSS di trasformazione per la classe nell'esempio seguente dimostra il movimento fluido di un oggetto da un punto con coordinate (0; 0) 80 pixel in alto. La classe giù specifica la direzione opposta del movimento - 80 pixel verso il basso.

L'animazione nell'esempio viene eseguita a una velocità costante, come indicato dal valore di lineare .

Mossa diagonale

Se si combinano i movimenti considerati definiti dalla trasformazione, gli esempi CSS per il movimento diagonale vengono ottenuti semplicemente.

L'attributo imposta i valori per entrambe le coordinate. La distanza di offset è espressa in pixel. Dove l'oggetto si muoverà dipende dai segni. Sono possibili quattro opzioni:

• x , y positivo: sposta verso il basso a destra;
• x , y negativo - sposta a sinistra in alto;
• x - positivo, y - negativo - movimento verso l'alto a destra;
• x - negativo, y - positivo - sposta a sinistra in basso.

Un esempio aiuterà a trasformare le funzionalità CSS.

Se lo spostamento lungo entrambi gli assi viene eseguito dello stesso numero di pixel (ad esempio 32), è sufficiente specificare un numero. Cioè, translate (32) corrisponde a tradurre (32, 32).

rotazione

Dopo aver considerato le possibili modalità di spostamento, passiamo al prossimo tipo di trasformazione: la rotazione. La rotazione imposta il valore di rotazione (Xdeg) , dove X è gradi (da 0 a 360) con cui l'oggetto devia dalla sua posizione originale.

Resta da capire il senso di rotazione. Il tipo di rotazione è determinato dai segni: più - in senso orario, meno - contro. Se lo si desidera, è possibile combinare entrambi i tipi di rotazione: vedere l'esempio di seguito.

il ridimensionamento

Il seguente valore aggiunge il ridimensionamento dell'elemento: scala ( a , b ) . Le lettere tra parentesi sono la larghezza e l'altezza dell'oggetto. Se si desidera aumentare proporzionalmente le dimensioni di tre volte, è sufficiente scrivere la scala (3) . Ridurre le dimensioni del numero inferiore a uno.

L'attributo CSS t ransform può essere applicato solo alla scala orizzontale X o solo alla scala verticale Y. Riflessione interessante e effetti ombra si ottengono se vengono assegnati valori negativi per la scala Y.

Trasformazione del testo

I principianti confondono la proprietà di trasformazione con l'attributo CSS di testo-trasformazione . Ricorda, questo parametro si applica solo al testo. È usato per controllare il caso di scrivere un paragrafo di caratteri. Ad esempio, dopo aver installato lettere minuscole, il testo viene convertito in lettere minuscole, maiuscole in maiuscolo (come quando si preme il tasto CapsLock sulla tastiera). Per rendere le parole iniziano con una lettera maiuscola, la proprietà viene assegnata in maiuscolo .

A differenza della trasformazione dell'oggetto, la trasformazione del testo supporta il meccanismo di ereditarietà. La conversione dei caratteri è assegnata alle classi che sono responsabili della visualizzazione delle intestazioni, il che è comodo in pratica, poiché non è necessario tenere traccia del metodo di registrazione. Sotto qualsiasi variante di ortografia, tutti i blocchi di testo appariranno sul sito nello stesso modo.