Перевертывание SVG с помощью Snap для IE 10+

У меня есть следующий код, который имеет многоугольник SVG и использует анимацию CSS3, чтобы перевернуть его. Это отлично работает в браузерах, отличных от IE.Перевертывание SVG с помощью Snap для IE 10+

<body> 

    <style> 



     .front 
     { 
      animation-duration: 3s; 
      animation-name: flipin; 
      animation-iteration-count: 1; 
     } 

     @keyframes flipin 
     { 
      from 
      { 
       transform-origin: 300px 286.5px; 
       transform: rotateX(0deg); 
      } 

      to 
      { 
       transform-origin: 300px 286.5px; 
       transform: rotateX(360deg); 
      } 
     } 

    </style> 

    <div class="click panel circle"> 
     <svg height="600" width="600" version="1.1" xmlns="http://www.w3.org/2000/svg" style="background-color: gray;" class=""> 


      <polygon points="200,286 250,200 350,200 400,286 350,373 250,373" fill="green" transform="" id="polygon-front" class="front" /> 

     </svg> 
    </div> 

</body>

Есть ли способ сделать эту работу в IE 10+, например, с помощью Snap или что-то еще?

источник

2016-09-02 cdub

Это Demo, я использовал GASP lib.
Это немного сложно! Это video для более подробного объяснения.

 <polygon points="200,286 250,200 350,200 400,286 350,373 250,373" fill="green" transform="" id="polygon-front" class="front" /> 

    </svg> 
</div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> 
<script> 

    var tl = new TimelineMax(); 

    tl.set("#polygon-front", { 
     transformOrigin: "center" 
    }); 

    tl.from("#polygon-front", 1, {scaleY: 1}) 
     .to("#polygon-front", 1, {scaleY: 0}); 

    // controls ** 

    tl.yoyo(1); 
    tl.repeatDelay(0) 
    tl.repeat(1); 
    tl.timeScale(2); // to speed up the animation , normal value is 1 


</script>

источник

2016-09-03 13:47:56

Перевертывание SVG с помощью Snap для IE 10+

ответ

Смежные вопросы