Verwenden von GSAP zum Drehen Div um Y-Achse in einem schiefen Winkel

Question

Ich versuche, eine Animation eines Buches öffnen und schließen mit HTML, CSS und GSAP. Ich habe zwei Probleme:

1. Die Seiten müssen in offene und geschlossene Positionen drehen.
2. Der Z-Index für eine der Seiten muss geändert werden, und aus irgendeinem Grund ist es nicht.

GIF animation of what I want it to look like

JS Fiddle showing current implementation

HTML

<div class="cover-info"> 
    <a id="main-toggle" href="#"> 
    <div class="book-container"> 
     <span class="book-page p1"></span> 
     <span class="book-page p2"></span> 
     <span class="book-page p3"></span> 
     <span class="book-page p4"></span> 
    </div> 
    </a> 
</div> 

JS (mit JQuery)

$(".cover-info").each(function(index, element) { 
    var p1 = $(".book-container .p1"); 
    var p2 = $(".book-container .p2"); 
    var p3 = $(".book-container .p3"); 
    var p4 = $(".book-container .p4"); 
    var tl = new TimelineLite({paused:true}); 
    tl 
     .to(p1, 0.25, { 
     css: { 
      rotationY: "180deg", 
      transformOrigin:"0 100%", 
     }, 
     ease: Power1.easeOut 
     }) 
     .to(p2, 0.2, { 
     css: { 
      rotationY: "135deg", 
      skewY: "30deg", 
      transformOrigin:"0 100%", 
     }, 
     ease: Power1.easeOut 
     }) 
     .to(p3, 0.1, { 
     css: { 
      rotationY:"45deg", 
      skewY: "-30deg", 
      z: "2", 
      transformOrigin:"0 100%", 
     }, 
     ease: Power1.easeOut 
     }); 
    element.animation = tl; 
    }); 
    $(".cover-info").hover(over, out); 
    function over(){ this.animation.play() }; 
    function out(){ this.animation.reverse() }; 

Answer 1

Ich habe es herausgefunden - wenden Sie die RotationY als ein GSAP-Attribut, nicht CSS.

$(".cover-info").each(function(index, element) { 
    var p1 = $(".p1"); 
    var p2 = $(".p2"); 
    var p3 = $(".p3"); 
    var p4 = $(".p4"); 
    var tl = new TimelineLite({paused:true}); 

    tl 
     .to(p1, .2, { 
     rotationY: "180deg", 
     css: { 
      skewY: "-180deg", 
      transformOrigin:"0 100%", 
      zIndex: "2", 
     }, 
     ease: Power1.easeOut, 
     }) 
     .to(p2, .15, { 
     rotationY: "135deg", 
     css: { 
      skewY: "-135deg", 
      transformOrigin:"0 100%", 
     }, 
     ease: Power1.easeOut, 
     }) 
     .to(p3, .05, { 
     rotationY:"45deg", 
     css: { 
      skewY: "-45deg", 
      transformOrigin:"0 100%", 
     }, 
     ease: Power1.easeOut, 
     }); 
    element.animation = tl; 
    }); 
    $(".cover-info").hover(over, out); 
    function over(){ this.animation.play() }; 
    function out(){ this.animation.reverse() }; 
};