Trasformazioni 2D e 3D coi CSS3

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

I CSS3 non si limitano ad offrire ai designer maggiori opportunità in termini di stilizzazione degli elementi, ma anche dinamicità: in questo articolo, infatti, esaminiamo il comando transform che consente di effettuare trasformazioni degli elementi in 2D (senso bidimensionale) e 3D (senso tridimensionale).

In particolare andiamo ad analizzare la rotazione con i CSS3, partendo da un box di base di cui segue il codice HTML:

<div id="box"></div>

Andiamo ad assegnare una stilizzazione di base al box:

#box
{
    background: #0AAA0A;
    width: 250px;
    height: 250px;
    border: solid 1px #000;
}

Impostiamo uno sfondo, un bordo e delle dimensioni, in modo da poterlo vedere e gustare gli effetti 2D prima, e 3D poi, che andremo a creare al passagio del mouse su di esso.

TRASFORMAZIONE 2D CON I CSS3

Avvalendoci del metodo rotate(), che accetta come parametro il numero di gradi della rotazione (usando quindi deg - in inglese degrees - come unità di misura), possiamo impostare ad esempio una rotazione di 50 gradi sul box al passaggio del mouse.

Segue il codice:

#box:hover
{
    transform: rotate(50deg);
    -o-transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    -moz-transform: rotate(50deg);
    -webkit-transform: rotate(50deg);
}

Utilizziamo, come sempre, i prefissi -o-transform per Opera, -ms-transform per Explorer, -moz-transform per Firefox e -webkit-transform per Chrome e Safari, come corredo al comando di base transform.

TRASFORMAZIONE 3D CON I CSS3

La rotazione tridimensionale coi CSS3 prevede, in accoppiata al comando transoform, l'utilizzo dei metodi rotateX() e rotateY() per generare, rispettivamente, la rotazione in verticale ed in orizzontale degli elementi.

Vediamo un esempio di trasformazione 3D del box in verticale:

#box:hover
{
    transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -webkit-transform: rotateX(180deg);
}

Quindi in orizzontale:

#box:hover
{
    transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

Trattandosi di un box di fatto vuoto non possiamo gustare a pieno l'effetto, per questo vediamo come renderlo fluido aggiungendo una temporizzazione attraverso le transizioni.

EFFETTI DI TRANSIZIONE SULLA ROTAZIONE DEL BOX

Come suddetto, proviamo ad impostare una temporizzazione / transizione di 3 secondi per il completamento dell'effetto di rotazione degli elementi, iniziando con la trasformazione bidimensionale:

#box:hover
{
    transform: rotate(50deg);
    transition: transform 3s;
    -o-transform: rotate(50deg);
    -o-transition: transform 3s;
    -ms-transform: rotate(50deg);
    -moz-transform: rotate(50deg);
    -moz-transition: transform 3s;
    -webkit-transform: rotate(50deg);
    -webkit-transition: transform 3s;
}

Associamo alla transizione il comando transition, specificando il tempo di esecuzione esprimendolo in secondi.

Applichiamo quindi l'effetto sulla rotazione bidimensionale:

#box:hover
{
    transform: rotateX(180deg);
    transition: transform 3s;
    -o-transform: rotateX(180deg);
    -o-transition: transform 3s;
    -ms-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -moz-transition: transform 3s;
    -webkit-transform: rotateX(180deg);
    -webkit-transition: transform 3s;
}

Concludiamo con l'effetto applicato alla rotazione tridimensionale:

#box:hover
{
    transform: rotateY(180deg);
    transition: transform 3s;
    -o-transform: rotateY(180deg);
    -o-transition: transform 3s;
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -moz-transition: transform 3s;
    -webkit-transform: rotateY(180deg);
    -webkit-transition: transform 3s;
}

Nei due casi della trasformazione tridimensionale, vale naturalmente lo stesso concetto di associazione per la transizione.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (46.306)

:: Referenze dei fogli di stile Css (41.553)

:: Menu ad effetto mouseover con i Css (38.747)

:: Effetti sui link con i Css (28.771)

:: Testo verticale coi Css (19.611)

:: Angoli smussati in un box coi Css (18.695)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (15.970)

:: Box con effetto ombra con i CSS3 (15.876)

:: Stilizzare i form Html con i Css (15.562)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.257)

IN EVIDENZA
DOWNLOAD