pixi.js rotateY 3d旋转木马

Question

任何人都知道如何在PIXI.js中创建这个codepen示例？

该示例使用css属性。我需要它在PIXI中制作它，我想知道是否有人知道如何做到这一点。 在下面的代码中，轮播使用CSS rotationY旋转框以实现“3D”效果。

谢谢，

UKW

var boxes = $(".box"),
stage = $(".stage"),
$nav = $("#nav");

var angle = 360 / 13;

TweenLite.set(stage, {
  css: {
    perspective: 1100,
    transformStyle: "preserve-3d"
  }
});

boxes.each(function(index, element) {
  TweenLite.set(element, {
    css: {
      rotationY: index * angle,
      transformOrigin: "50% 50% -420"
    }
  });

  element.dataset.rotationY = index * angle;  
});

$nav.on("click", "#prev", function(){

  TweenMax.staggerTo(boxes, 1, {
    cycle: { rotationY: function(index) {      
      var y1 = +this.dataset.rotationY;
      var y2 = y1 - angle;
      this.dataset.rotationY = y2;
      return y2;
    }},
    // ease: Linear.easeNone
  }, 0);  
});

$nav.on("click", "#next", function(){

  TweenMax.staggerTo(boxes, 1, {
    cycle: { rotationY: function(index) {      
      var y1 = +this.dataset.rotationY;
      var y2 = y1 + angle;
      this.dataset.rotationY = y2;
      return y2;
    }},
    // ease: Linear.easeNone
  }, 0);
});