Flip card

[Ricky]

Hi, there are a lot of example about flip card, but i'm not able to find a right solution

I'm fighting with this,  trying to find a solution using only pixijs without html.

So, checking the code below i create a function onCardClick

with:

this.risiko_table is my container

this.card 1 and to are fron and back card

 

 

onCardClick: function(){
alert("click");
TweenMax.set(this.risiko_table, {
transformStyle:"preserve-3d",
z:0
});
TweenMax.to(this.card2, 2, {y:"+=180", ease:Power2.easeInOut});
TweenMax.to(this.card, 1, {z:"-=100", yoyo:true, repeat:1, ease:Power2.easeIn});
}

 

in this example, second one it work perfectly but using html

 

https://greensock.com/forums/topic/20670-nine-flipcards/?tab=comments#comment-96707

 

but it slide down without flip (rotation)

    (function (){   
        var body, container, hearts, spades, isTouch;        

        body = $('body');
        container = $("<div>");
        hearts = $("<div>");
        spades = $("<div>");


        TweenMax.set(body, {css:{
          width:258,
          height:401,
          transformStyle:"preserve-3d",
          perspective: 800,
          perspectiveOrigin:'50% 50% 0px',
          backgroundColor:'#000000',
          'margin-left':'auto',
          'margin-right':'auto'
        }})


        TweenMax.set(container, {css:{
          transformStyle:"preserve-3d",
          z:0
        }});

        TweenMax.set(hearts, {css:{
          backgroundImage:'url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/hearts.png")'
        }});

        TweenMax.set(spades, {css:{
          backgroundImage:'url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/spades.png")',
                                  rotationY:-180

                                }});


        TweenMax.set([hearts, spades], {css:{
          width:258,
          height:401,
          backfaceVisibility:"hidden", 
          position:"absolute",}})

        container.appendTo(body);
        hearts.appendTo(container);
        spades.appendTo(container);

        isTouch = ("touchstart" in document.documentElement);

        
        enableUI();


      

      function onMouseDown (e){

        TweenMax.to(container, 2, {css:{rotationY:"+=180"}, onComplete:enableUI, ease:Power2.easeInOut});
        TweenMax.to(container, 1, {css:{z:"-=100"}, yoyo:true, repeat:1, ease:Power2.easeIn});
      }

      function enableUI (){
        
        if(isTouch){

          container.one("touchend", onMouseDown);
        } else {

          container.one("click", onMouseDown);
        }
      }
})();

Could you help me?

 

Thanks a lot

[ivan.popelyshev]

Yo!

Why did you post it in pixijs subforum?

[Ricky]

2 minutes ago, ivan.popelyshev said:

Yo!

Why did you post it in pixijs subforum?

I don't know if i'm worng, but i'm developing it with pixijs

[Exca]

The code you pasted (both what you are currently using & the example at the bottom) use css transformations. You cant use those when operating within canvas. Without knowing how tweenmax works I'd assume those values would need to be numbers, not strings.

In addition pixi has no z-coordinate nor you can say preserve-3d as that's a css definition.

The example has 3d perspective, this is also something that's not enabled on pixi without plugins. You could do a fake rotation with scale like this (I dont know tweenmax much so this is pretty pseudocode):

Tweenmax.to(this.card2.scale, {x:0}).call( function(){
 //Swap textures on the card when it's completely scaled
}).to({x:1})

[ivan.popelyshev]

My telepathy has its limits. Right now by that info you posted I dont know which way did you took and why did you fail. It just seems like "i saw this with html+tweenmax i wanna do this in pixi, but dont know where to start"

I'm ready to help but i need more info to work on. Also if you post big chunks of code, maybe its better to use codepen or jsfiddle to show how it actually works.

[Ricky]

I tryied some ways, first of all using card.js , without success and second way using tween, also without success.

I'm asking help to setup some flip card with pixijs, of course i'm newbie

 

Thanks for your time and help

[ivan.popelyshev]

That way you wont get answer in a hour or two, maybe in several day of "fishing" in this thread before somebody will have time to help from scratch. Especially because https://pixijs.io/examples/#/plugin-projection/cards.js is really not for newbies, and to explain how ti works and how to modify things, we'll have to explain all basics first.

[Ricky]

i know, for that i try to find some other solutions, not clean and elegant like card, but in some way efficent for my goal.

It's more or less 2 days i'm trying to find some solution without success, unfortunatly

[jonforum]

you not use pixijs in this case but dom html and css.
Pixijs are inside a canvas elements and not related to html,css dom element.
To use 3d transform in css look for `transform:scale3d(x,y,z)`
It also require and compute from gpu.
https://developer.mozilla.org/fr/docs/Web/CSS/transform-function/scale3d


For pixijs , 3d are available but you will need change totally your approach.
And you will need maybe some week for study
https://pixijs.io/examples/#/plugin-projection/cards.js

 

 

here for you a tween solution but it not pixijs, it html,css, and it not use transform3d.
https://codepen.io/rhernando/pen/IJfAy?editors=0010

[Ricky]

Thank you for your reply, i've found a solution with tween and 'im also studing card.js