Proprieta transform CSS3 e il suo metodo rotate.

Con il css3 sono arrivate tante nuove possibilita riguardo animazione dei elementi nella nostra pagina. Io personalmente ritengo che effetti di animazioni devono essere applicati al punto giusto e in maniera moderata per non dimostrare al utente finale  del nostro sito tutta la nostra bravura nel conoscere i CSS ma con questi effetti raggiungere un obiettivo.

Come creare effetto di rotazione coi CSS o metodo rotate di transform.

Quindi io vuoto il "si" per quando riguarda l'animazione, ma in maniera contenuta per raggiungere lo scopo del nostro sito o della singola pagina. Se stiamo scrivendo un articolo e abbimo usato dei immagini inutile che li faro tutti tremare, ma potrei utilizzare il loro ingrandimento per mostrarli meglio, potrei aggiungere una ombra per evidenziarli sulla mia pagina e distinguere immagini che ritengo di primissima priorit dagli altri, per sollevare interesse e invitare l'utente a cliccare su un certo oggetto, potrei aggiungere qualche altra transformazione ma deve essere sempre nella maniera mirata e inseguire uno scopo. Ripeto non devo mostrare la mia conoscenza del CSS nel nostro caso a tutto fronte al mio visitatore.

Proprieta transform come strumento di animazione

E con questa premessa vediamo la proprieta di della CSS3 come transform e il suo metodo rotate() (ruotare, girare) Possiamo applicare questa propriet ad elementi con il tag img, canvas, e ad elementi che posiedono le proprieta CSS come display:block, display:inline-blok, display:inline-table o a qualsiasi altro elemento che rappresenta una tabela.

Vediamo un semplice esempio:

Abbiamo inserito una semplice immagine per poter testare su di essa, alla quale abbiamo aggiunto la classe prova, per distinguerla dalle altre immagini nella nostra pagina

minisite

Abbiamo applicato a questa immagine una classe prova:hover { transform: rotate(20deg); come potette notare ho aggiunto anche la pseudo classe :hover in modo che la trasformazione avene al passaggio del mouse sopra l' immagine (al hover la nostra immagine passera nello stato intermedio e dopo alontanamento del puntatore ritornera nello stato precedente ).

<style>
.prova:hover {
 transform: rotate(20deg);
</style>

minisite

La immagine fara un giro in senso orario per 20 gradi di 380 disponibili perché dopo 380 gradi fara il giro e ritorna nella posizione iniziale. Ovvio se inserisco rotate (-20deg) la mia immagine girera in senso contrario.

Ma come potete notare il centro di rotazione e quello del centro della nostra immagine, per spostare il centro di rotazione dobbiamo aggiungere un altra proprieta di  CSS come transform-origin: che puo asumere uno di questi valori left, rigt, top, bottom e il valore default è center, o combinazioni di questi

Nel esempio sotto o creato uno nuovo stile per la nostra immagine (ho anche cambiato la classe per la immagine per distinguerla dalla precedente ora è prova1)

.prova1:hover {
transform: rotate(20deg);
transform-origin:center top;
}

 

minisite

 

Posiamo indicare il valore del centro di rotazione anche in percentuale, valore di default è 50% 50% ciò è al centro della immagine , indicando per esempio come ho fatto io nel esempio qui sotto  100% 100% il centro di rotazione si trovera al'angolo a destra in basso

.prova2:hover {
transform: rotate(20deg);
transform-origin:100% 100%;}

 

minisite

Conlusione

Diciamo che é abbastanza facile, basterebbe dedicare almeno un qurto d'ora per fare dei esercizi in qualsiasi programma che state utilizzando per la scrittura del codice e vi rimane nella memoria questa propriet di trasformazione- transform

Letto 891 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso