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.
La conoscenza di queste tecniche torna utile in abiti di usabilità del sito web (user experience o UX) ed ha a che fare con la SEO seppur in modo “indiretto”. Un sito usabile è un sito che l’utente ed i motori di ricerca possono leggere bene e questo ne migliora il posizionamento indirettamente, parola di consulente SEO Napoli e Italia
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?
