CATEGORIA:

Ruotare con CSS una immagine, del testo, un div o altri 1000 elementi

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

Di cosa parla questo articolo

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. Questo descritto è davvero il modo più semplice per ruotare con CSS gli oggetti presenti nella nostra pagina web.

Ruotare con CSS: 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 di come ruotare con CSS:

 

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 con CSS un elemento e posizionarlo in diagonale, molto d’effetto ma è bene non esagerare… rischi di confondere i tuoi visitatori!

Ruotare con CSS: rotazione dinamica

Cosa diversa invece se si vuole ottenere una animazione, ad esempio ruotare con CSS 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 .ruota gli 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. 

Ruotare con CSS immagini, testo, div, o altro è fattibile per tutti senza grosse difficoltà. Con studio e perseveranza si possono imparare anche trucchetti più complicati riuscendo ad ottenere effetti più complessi.

Il CSS ha delle potenzialità enormi, continuate a studiarlo e avrete grandissime soddisfazioni, ad esempio sai come cambiare il CSS in base all’utente?

Share on twitter
Share on facebook
Share on linkedin
Share on whatsapp
Share on email

Accendi le Seonapsi

mail seonapsi-01

Contattami

Puoi usare questo modulo per contattarmi, nel rispetto della privacy.