Tun Sie etwas nach jeder 180 Grad

Question

Ich habe ein div mit etwas Text, den ich 360 Grad für x mal drehen möchte, aber ich möchte auch den Text alle 180 Grad ändern. Wie kann ich dies in Jquery oder Javascript erreichen?

Bis jetzt bin ich auf diesem fest, da ich keine Möglichkeit kenne, die Rotation zu überwachen.

$('.pie_chart').css({'transform' : 'rotate(2000deg)'}); 

ich in diesem Beitrag Denken sah, dass ich die Lösung nutzen könnte, aber es funktioniert nicht für mich arbeiten, oder ich könnte es nur falsch verwendet werden: CSS rotation cross browser with jquery.animate()

Answer 1

Das ist sehr ungenau, aber es wird die Idee über und sollte genug sein, um Sie auf die richtige Spur zu bringen

function AnimateRotate(angle) { 
    // caching the object for performance reasons 
    var $elem = $('#square'); 
    var texts = ['text', 'another thing', 'one more thing', 'finally'] 
    var maxRotations = Math.floor(angle/180); 
    var rotations = 0; 
    var lastRotation = 0; 

    // we use a pseudo object for the animation 
    // (starts from `0` to `angle`), you can name it as you want 
    $({deg: 0}).animate({deg: angle}, { 
     duration: 2000, 
     step: function(now) { 
      // in the step-callback (that is fired each step of the animation), 
      // you can use the `now` paramter which contains the current 
      // animation-position (`0` up to `angle`) 
      $elem.css({ 
       transform: 'rotate(' + now + 'deg)' 
      }); 


      // Here we must allow ourselves some margin for error 
      // We are making 4 rotations in 2 seconds, so in theory 
      // The box will be at the 180 degrees every half a second 
      // but in actuality it never is at exactly 180 degree except at the star and end 
      // Trial and error has shown that +6 degrees is more or less accurate, 
      // you could do some math to get a better precision 

      // We don't want to update the text at 0 degrees     
      if(now % 180 <= 6 && rotations > 0) { 
       // Shift off the first text and use that for the new text 
       $("#text").html(texts.shift()); 
       rotations++; 
      } else if(now % 180 >= 177) { 
       $("#text").html(texts.shift()); 
       rotations++; 
      } 

      } 
     }) 
    }; 

AnimateRotate(720);