Gire una imagen 180 grados al hacer clic con jquery con animación

Luego de tanto trabajar pudimos encontrar el arreglo de este atasco que tantos lectores de este espacio han presentado. Si deseas aportar alguna información no dejes de compartir tu información.

Solución:

Puedes usar alternar clase

$(document).ready(function() 
    $( ".toggle" ).click( function() 
        $("#image").toggleClass('flip');
    );
);

#image 
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  transition: transform 1s;


.flip 
  transform: rotate(-180deg);

Podría cambiar

$("#image").css('transform': 'rotate(-180deg)');

para

$("#image").toggleClass('flip');

Ya obtuviste la otra respuesta con respecto a la toggleClasspero ninguno explica el problema que tienes.

Configuró con éxito el transform del elemento a -180deg una vez que hace clic, pero su problema es que en el segundo clic, no agregar otro -180deg a ese elemento. Solo estableces (nuevamente) el valor de -180deg al transform attribute (que en realidad no hace nada, porque esto ya lo tienes -180deg sobre ese elemento).

Puedes arreglar esto usando el uno del otro. toggleClass ejemplos (lo que funcionaría muy bien) y también puede verificar si el valor actual de transform es noney si ese es el caso, configure el -180degde lo contrario, reinícielo:

$(document).ready(function() 
  $( ".toggle" ).click( function() 
    console.log($("#image").css('transform'));
    if ($("#image").css('transform') == 'none') 
      $("#image").css('transform': 'rotate(-180deg)');
     else 
      $("#image").css('transform': '');
    ;
  );
);

#image 
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  transition: transform 1s;


.flip 
  transform: rotate(-180deg);

Si piensas que te ha resultado de provecho nuestro artículo, agradeceríamos que lo compartas con otros entusiastas de la programación y nos ayudes a extender nuestra información.

---

---

Utiliza Nuestro Buscador