Jump to content

Flip card


Recommended Posts

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


this.risiko_table is my container

this.card 1 and to are fron and back card



onCardClick: function(){
TweenMax.set(this.risiko_table, {
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



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:{
          perspective: 800,
          perspectiveOrigin:'50% 50% 0px',

        TweenMax.set(container, {css:{

        TweenMax.set(hearts, {css:{

        TweenMax.set(spades, {css:{


        TweenMax.set([hearts, spades], {css:{


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



      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 (){

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

          container.one("click", onMouseDown);

Could you help me?


Thanks a lot

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

For pixijs , 3d are available but you will need change totally your approach.
And you will need maybe some week for study :)



here for you a tween solution but it not pixijs, it html,css, and it not use transform3d.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...