Share
Indice

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?

raoul gargiulo seo specialist seonapsi
Autore
Sono il proprietario del faccione sereno qui accanto, cerco di salvare i poveri siti web (a Napoli ma anche in tutta italia) abbandonati a loro stessi grazie alle mie armi segrete (Posizionamento SEO, kw research, Audit SEO, Sviluppo e un altro paio di assi nella manica che certo non svelo qui a te). Conosco Html, Php, Css, il kung fu, la ricetta della torta di mele e il mio animale totem è la papera (me lo ha detto il Grande Capo Indiano mentre fumava il kalumè della pace quindi ne sono abbastanza sicuro). Se volete saperne di più dovrete offrirmi da bere (o chiedere gentilmente, a volte funziona). Questo si chiama story telling e ti ha fatto leggere fino alla fine un testo che negli altri siti non leggeresti mai.

Cerchi un consulente SEO a Napoli (ma anche in tutta Italia) affidabile e con esperienza?

Lo hai trovato

Senza SEO nessuno vedrà mai il tuo sito… ma se non hai un sito da ottimizzare nessuno si accorgerà di te o della tua attività!

Parlami del tuo progetto con il form qui a fianco 👉🏼

SEO Copywr-AI-ting

Una guida a step che spiega passo dopo passo come posizionare i contenuti in prima pagina di Google con o senza l’Intelligenza Artificiale.