CSS: come ruotare una immagine, del testo, un div o altro

pillole di CSS di raoul gargiulo - blog.raoulgargiulo.it

Una delle cose più divertenti quando lavoro è giocare con il codice. Difficilmente ho avuto necessità di inserire qualcosa in obliquo o ruotare degli elementi con il CSS ma è sempre meglio essere pronti.

Per modificare la posizione di un oggetto ci sono diversi modi, il più semplice è quello di assegnare una classe all’oggetto che si vuole modificare e inserire del css inline o esterno.

. Rotazione statica

Per rotazione statica si intende la rotazione di un oggetto destinato a rimanere in quella posizione.
In questo esempio la mia classe si chiama .obliquo ma voi potete utilizzare quella che più vi aggrada, va bene qualsiasi nome o frase ma l’importante è che non ci siano spazi o caratteri speciali.

Successivamente si apre il file css e si inserisce il codice qui sotto, modificando i gradi si modifica l’inclinazione. Accetta anche numeri negativi.

 

/*---css obliquo-- */

.obliquo {

-webkit-transform: rotate(10deg);

-moz-transform: rotate(10deg);

-o-transform: rotate(10deg);

-ms-transform: rotate(10deg);

transform: rotate(10deg);
}

I prefissi -moz- -webkit- -o- -ms- si riferiscono ai vari browser (Chrome, Firefox, Explorer ecc.) in sostanza si ripete l’istruzione per ogni tipo di browser. Questi prefissi vengono aggiunti per la compatibilità tra i vari browser ed anche perchè nel CSS avanzato ci permettono di creare ulteriori effetti.

Qui sotto ecco un semplice esempio del risultato con spiegazione.

 

See the Pen
rotazione semplice di un oggetto con CSS
by Raoul Gargiulo (@Raoul-Gargiulo)
on CodePen.

Spiegazione dell’esempio: per prima cosa abbiamo definito in html il nostro oggetto div assegnandogli una classe. Successivamente gli abbiamo dato una forma quadrata grazie al css ed un colore rosso vivo. Per finire abbiamo aggiunto il selettore transform.

Come vedi è semplicissimo ruotare un elemento in CSS e posizionarlo in diagonale, molto d’effetto ma è bene non esagerare… rischi di confondere i tuoi visitatori!

. Rotazione dinamica

Cosa diversa invece se si vuole ottenere una animazione, ad esempio ruotare una immagine al passaggio del mouse.
Per far ciò non c’è bisogno di ricorrere a Javascript (che tra l’altro appesantisce la pagina e impegna un quantitativo maggiore di risorse), possiamo continuare ad usare il nostro caro CSS.

.ruota{
overflow: hidden;
transition-duration: 0.8s;
transition-property: transform;
}
.ruota:hover {
transform: rotate(360deg);

}

In questo caso stiamo definendo lo stato ed il comportamento dell’immagine durante lo stato normale e quello al passaggio del mouse.
In .ruotagli diciamo che l’immagine ha un selettore “transform” con una durata di 0.8s.
In .ruota:hover specifichiamo che il selettore “transform” equivale a ruotare l’immagine di 360 gradi.

Di seguito un esempio pratico, creando come nell’esempio precedente il nostro bel div rosso e quadrato ma stavolta con la classe “ruota”:

See the Pen
ruota oggetto su moushover
by Raoul Gargiulo (@Raoul-Gargiulo)
on CodePen.

Spiegazione dell’esempio: creiamo un div in html come visto precedentemente e tramite css gli diamo forma e colore.  Adesso nella classe .ruota specifichiamo in che modo deve ruotare il quadrato attraverso i selettori transition-duration e transition-property (altrimenti la rotazione sarà istantanea e non percepiremo il movimento). Fatto ciò non ci resta che aggiungere la rotazione alla classe .ruota:hover, ovvero al passaggio del mouse, in questo modo il quadrato sarà spostato di 360 gradi quando il puntatore ci passerà sopra. 

Il Css ha delle potenzialità enormi, continuate a studiarlo e avrete grandissime soddisfazioni!

 

Appassionato di informatica da sempre, amante della natura, dello sport, delle arti e di un altro fantastiliardo di cose. Definito dalla multipotenzialità e affamato di conoscenza. A parte questo... sono una persona normale.

Lascia un commento