Immagini che ruotano quando ci si clicca sopra con il mouse.

Come inserire l'effetto di rotazione con angolo e verso determinato per una data immagine quando ci si clicca sopra con il cursore.

Ho già presentato diversi effetti che riguardano le immagini in particolare ho illustrato come si possa far ruotare una foto al passaggio del cursore. Tale effetto si otteneva esclusivamente con il CSS3. In questo post riprendo quel discorso e presenterò un metodo per far girare una immagine in senso orario o antiorario non al passaggio del cursore ma quando ci si clicca sopra.

In questo caso oltre al CSS3 si utilizzano anche poche righe di javascript e si può settare l'angolo di rotazione che si vuole che compia l'immagine oltre alla durata della trasformazione e al tempo di permanenza nella nuova posizione. L'effetto di rotazione di un angolo retto è il seguente

Il codice si può incollare in un widget andando su Layout > Aggiungi un gadget > HTML/Javascript oppure anche in un post o in una pagina statica selezionando la modalità HTML. Il codice da incollare ha delle righe specifiche per funzionare con tutti i principali browser

<img src="http://lorempixel.com/402/402" id="rotazione">
<script>
//<![CDATA[
$('#rotazione').on("click", function(e) {
  e.preventDefault();
  $('#rotazione').addClass('angoloretto'); 
  var tempo = setTimeout(function() {
  $('#rotazione').removeClass('angoloretto');
  }, 1000);
});
//]]> 
</script>
<style>
#rotazione {
  position: relative;cursor:pointer;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top:20px;
  margin-bottom:20px;
  -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
}
#rotazione.angoloretto {
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
    zoom: 1;
}
</style>

Le personalizzazioni più importanti riguardano i seguenti parametri:

1. http://lorempixel.com/402/402 non è altro che l'URL generico della immagine
2. 1000 è la durata in millisecondi della permanenza nella nuova posizione dopo la rotazione
3. Le tre righe evidenziate di giallo servono per centrare l'immagine
4. 20px sono i margini dalla parte alta e bassa
5. 0.6s è la durata in secondi della rotazione (Si può usare anche 600ms)
6. 90deg è l'angolo di rotazione (in senso orario perché positivo)
7. zoom: 1 significa che le dimensioni della foto rimangono invariate

La seconda immagine della demo è stata invece inserita con questo codice

<img src="http://lorempixel.com/400/400" id="rotazione2">
<script>
//<![CDATA[
$('#rotazione2').on("click", function(e) {
  e.preventDefault();
  $('#rotazione2').addClass('angoloretto2'); 
  var tempo = setTimeout(function() {
  $('#rotazione2').removeClass('angoloretto2');
  }, 1000);
});
//]]> 
</script>
<style>
#rotazione2 {
  position: relative;cursor:pointer;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top:20px;
  margin-bottom:20px;
  -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
}
#rotazione2.angoloretto2 {
    -webkit-transform: rotate(-90deg);
       -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
         -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
    zoom: 1.1;
}
</style>

che produce sempre una rotazione di 90 gradi ma stavolta in senso antiorario. Inoltre c'è un incremento delle dimensioni della foto visto che è stato inserito zoom: 1.1;. Infine la rotazione dura 500 millisecondi.