blog

Torniamo a parlare di CSS e di nuove Proprietà CSS3 interessantissime, come quella di oggi.

La proprietà CSS3 di oggi è Transform: consente di ruotare, scalare, inclinare e muovere orizzontalmente un elemento, ma prendiamo in considerazione una funzione per volta:

CSS3 Transform:Rotate

Come dice la parola stessa consente la rotazione di un’elemento mediante un valore espresso in gradi:

#ruota {
    transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
}

CSS3 Transform: Scale

Tramite l’utilizzo di un valore assoluto questa funzione permette di scalare un’elemento:

#scala {
    transform: scale(0.5,1.0);
    -webkit-transform: scale(0.5,1.0);
    -o-transform: scale(0.5,1.0);
    -moz-transform: scale(0.5,1.0);
}

Il primo valore riguarda il ridimensionamento orizzontale e il secondo valore il ridimensionamento verticale.

CSS3 Transform: Skew

Utilizziamo questa funzione per inclinare l’elemento attribuendo un valore espresso in gradi.

#distorci {
    transform: skew(10deg, 5deg);
    -webkit-transform: skew(10deg, 5deg);
    -o-transform: skew(10deg, 5deg);
    -moz-transform: skew(10deg, 5deg);
}

CSS3 Transform: Translate

Consente di muovere un elemento di un certo numero di pixel sull’asse orizzontale

#sposta {
   transform-origin: 10px 30px;
   -moz-transform-origin: 10px 30px;
   -webkit-transform-origin: 100% 30%;
   -o-transform-origin: 10px 30px
}

Con la nascita dell’HTML5, questa proprietà sarà sempre più usata e abbinata alla proprietà CSS3 Transition, un’altra proprietà CSS3 che abbiamo trattato il mese scorso necessaria a far muovere gli elementi per creare interessanti animazioni e presto standardizzata per tutti i browser, nel frattempo per una corretta visualizzazione vanno utilizzati i soliti prefissi proprietari.

Per finire voglio segnalare questo bellissimo tools 3Dtrasforms realizzato da Western Civilisation, per realizzare un codice pulito e un risultato ottimale.