Css3 Selection e Transform

img-2
Tempo stimato di lettura: 1 minuto, 20 secondi
Pubblicato il 14 febbraio 2012

La scorsa volta ho parlato della proprietà Css3 border-radius, oggi invece voglio parlare di due interessanti proprietà:   

  1. Selection
  2. Transform

Andiamo ora a vedere nel dettaglio queste due proprietà Css3.

Descrizione e uso della proprietà Selection

La proprietà selection consente di evidenziare il testo del nostro sito/blog con un colore specifico.

HTML

CSS

Descrizione e uso della proprietà Transform

La proprietà transform  consente di effettuare manipolazioni/trasformazioni 2D,  ovvero ruotare, scalare, inclinare e spostare elementi. Si può utilizzare sia per elementi block che per elementi inline.

  • Rotate
  • Scale
  • Skew
  • Translate

Esempio n°1: Rotate

Ruota un elemento esprimendo i valori in gradi. Valori negativi consentono di ruotare in senso antiorario. In questo esempio l’elemento verrà ruotato di 15 gradi in senso orario.

CSS

Risultato:

Esempio n°2: Scale

Scala un elemento di cui i valori sono: il primo il ridimensionamento orizzontale mentre il secondo il ridimensionamento verticale.

CSS

Risultato:

Esempio n°3:  Skew

Distorce un elemento lungo gli assi X e Y. In questo esempio l’elemento verrà distorto di 5 gradi sull’asse delle X e 10 gradi sull’asse delle Y.

CSS

Risultato:

Esempio n°4:  Translate

Sposta un elemento lungo gli assi X e Y. In questo esempio l’elemento verrà spostato di 50px sull’asse delle X e 10px sull’asse delle Y.

CSS

Risultato:

Vi invito ad usare con cautela queste proprietà Css3, molti browser ancora non riescono a leggerle. Tutte le specifiche Css3 Transform le potete trovare a questo link:

http://www.w3.org/TR/css3-2d-transforms/ 

Shares