Come visualizzare foto rettangolari in forma circolare e ruotanti.

Come mostrare una foto rettangolare in forma circolare e che ruoti al passaggio del cursore.

Nel precedente articolo abbiamo visto come mostrare come circolari delle immagini quadrate o rettangolari mentre in un post di qualche tempo fa illustrai come far ruotare una foto al passaggio del mouse. Per entrambi gli effetti vengono utilizzati solo dei fogli di stile e non servono in alcun modo i programmi di grafica. Vediamo adesso come combinare i due effetti cioè come mostrare una qualsiasi immagine di forma rettangolare o quadrata in forma circolare e che ruoti al passaggio del mouse. Quando il cursore smetterà di puntare la foto si assisterà alla rotazione in senso opposto.

Si possono personalizzare le dimensioni, il numero di gradi della rotazione e la sua durata. Se si vuole postare solo una foto con questa particolarità basta andare nell'Editor di Blogger e in HTML incollare, nel punto in cui si vuole visualizzare la foto, il seguente codice

<style type="text/css">
.circolare {
  width: 300px;
  height: 300px;
  border-radius:999em;   
-moz-border-radius:999em; 
-webkit-border-radius:999em;
  -o-border-radius: 999em;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden; 
}
.circolare:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
</style>
<img class="circolare" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj215bHIuakLMuXgWEIf1JLwKe0fHjvZUzuF7BCDc4FpNoO9ZWFTQcyfjSE0CqUfNQyUUFm2x_7dOP7Hg6ntaSYRtxHWxivn16X7UmKmLEQMSFmFf2vgxPX-NbYaL-GZoHbwYV5of2-S0s/s912/natura4.jpg"/>

che produce questo risultato

I parametri da personalizzare sono colorati di rosso e mostrano una immagine di 300 pixel di diametro, che effettua una rotazione di 360 gradi nel tempo di 1 secondo. Se vogliamo utilizzare questa personalizzazione per più immagini allora dobbiamo andare su Modello > Modifica HTML e cercare la riga di codice ]]></b:skin> quindi, subito sopra incollare la parte di codice tra <style… > e </style>. Quando volessimo postare una immagine con quella particolarità basterà incollare questa riga

<img class="circolare" src="URL_IMMAGINE" alt="nome-immagine" title="titolo immagine"/>

dove i tag Alt e Title sono stati messi per una migliore ottimizzazione SEO.