使用 GSAP 以倾斜角度围绕 Y 轴旋转 Div答案

【问题标题】：Using GSAP to Rotate Div Around Y-Axis at a Skewed Angle使用 GSAP 以倾斜角度围绕 Y 轴旋转 Div
【发布时间】：2016-09-04 14:34:54
【问题描述】：

我正在尝试使用 HTML、CSS 和 GSAP 制作书籍打开和关闭的动画。我有两个问题：

页面需要旋转到打开和关闭位置。
其中一个页面的 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() };

【问题讨论】：

标签： css css-animations css-transforms gsap

【解决方案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() };
};

【讨论】：