使用GSAP以偏斜的角度围绕Y轴旋转Div

Question

我正在尝试使用HTML，CSS和GSAP制作一本书的开启和关闭动画。我有两个问题：

1. 页面需要旋转进入打开和关闭位置。
2. 其中一个页面的z-index需要更改，并且由于某种原因 它没有。

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（使用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

我想通了 - 将rotationY应用为GSAP属性，而不是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() };
};