[Transition of 3d cube]

Thanks all, I already have a threejs rotating cube working in Pixi stage. I wanted to check if i can do this with gsap but i understand it now where i have gone wrong. Jack's 3rd point gives me more idea. I was trying to create a cube with gsap as given in the thread. 

[Transition of 3d cube]

How can this be implemented in Pixi? The cube rotation as given above.

 

I tried this

 

 const app = new PIXI.Application({

    width: 800,

    height: 600,

    backgroundColor: 0x1099bb,

    });

 

      document.body.appendChild(app.view);

 

      // Create a new texture

      const texture1 = PIXI.Texture.from('https://s.cdpn.io/33073/1-150x150.jpg');

      const texture2 = PIXI.Texture.from('https://s.cdpn.io/33073/2-150x150.jpg');

      const texture3 = PIXI.Texture.from('https://s.cdpn.io/33073/3-150x150.jpg');

      const texture4 = PIXI.Texture.from('https://s.cdpn.io/33073/4-150x150.jpg');

      const texture5 = PIXI.Texture.from('https://s.cdpn.io/33073/5-150x150.jpg');

      const texture6 = PIXI.Texture.from('https://s.cdpn.io/33073/6-150x150.jpg');

    

 

      // time animation in seconds

      const time = 2.0;

      const cont = new PIXI.Container();

      const parentCont = new PIXI.Container();

      const bunny1 = new PIXI.Sprite(texture1);

      const bunny2 = new PIXI.Sprite(texture2);

      const bunny3 = new PIXI.Sprite(texture3);

      const bunny4 = new PIXI.Sprite(texture4);

      const bunny5 = new PIXI.Sprite(texture5);

      const bunny6 = new PIXI.Sprite(texture6);     

      cont.addChild(bunny1);

      cont.addChild(bunny2);

      cont.addChild(bunny3);

      cont.addChild(bunny4);

      cont.addChild(bunny5);

      cont.addChild(bunny6);

      parentCont.addChild(cont);

      app.stage.addChild(parentCont);   

 

      parentCont.x = 500;

      parentCont.y = 300;

 

      var tl3 = new gsap.timeline({paused:true}),

    tl4 = new gsap.timeline({paused:true}),

    face1 = bunny1,

    face2 =bunny2,

    face3 =bunny3,

    face4 =bunny4,

    face5 =bunny5,

    face6 =bunny6,

    cubeParent  = cont;

    

   

 

gsap.set(parentCont, {pixi:{perspective:500}});

 

gsap.set(cubeParent , {transformStyle:"preserve-3d"});

 

tl4

    .to(cubeParent , 5, {pixi: {rotationY:720}})

    .to(cubeParent , 2, {pixi: {rotationX:360}}, "-=2.5")

    .to(cubeParent , 1, {pixi: {rotationY:-360, rotationX:0}});

 

but this doesn't seem to work