3D card flip effect

GoJS
1

I’m trying to achieve a 3D card Flip effect. Has anyone managed to do this? A simple effect like the one shown her: Card Flip · Intro to CSS 3D transforms
Apologies if this is a daft question, I’m a bit of a newbie.

2

What are the two objects that you want to flip between? Are they both images, or do they include arbitrarily complex GoJS Panels, or something in-between?

3

I’ve converted the node to an SVG image. I would be good to have knowledge for all scenarios for the future. Many thanks

4

So you have a whole node, and you want to execute this flip to make it look like some other display, that has the same dimensions?

Are links connected?

I’ll think about how you might do this, but it may not be possible.

5

The links are connected to other nodes but the node image is the only element that flips. so the connectors stay in place and the middle node disconnects while it flips and then reconnects when it finishes the flip.
The front side and backside (flipped) are the same size.

6

You could do something like this:

https://codepen.io/simonsarris/pen/rNvymWJ?editors=1010

This sorta does what you want, except it does not have the perspective component, which isn’t easy to add. By playing with the easing functions you can give a slightly more convincing “rotation”, but it’s still not the same.

Note I have a small workaround for a bug in 2.2.15, that will be fixed in the next release (you won’t need the setTimeout call).

7

Thanks for this Simon, my dev team came up with the same solution but it’s not what is needed visually. I’m still keen to have the ‘3d’ effect.