Adobe XD’s 3D transforms allows us to create design concepts in 3D space. Let’s try it out for a card flip concept
The use case being a gift voucher offer for an e-commerce store
The idea is to have it as website modal or popup
For the 3D effect to work, we have the front and back of the card designed
And we have them placed on top of one another.
If we hide the front card group, we can see the back card design
With everything set, let's enable 3D transforms! With the back card group selected, set the Y rotation to -180
Then set the Z position to -1
Unhide the front card group and set the Z position to 1
Now select both the front and back card designs and add it to a group
Let's duplicate this artboard and name it accordingly
On this artboard we want to swap Z positions. So set the front card to -1
And the back card needs a Z position of 1
Then with the group selected (Voucher) set the Y rotation to 180
The idea is to have the card flip up and forward. So use the 3D transforms gizmo to make adjustments
With the artboards designed, we can now switch to Prototype mode
Wire the front card to the artboard with the back of the card
Set the trigger as a Tap, make it Auto-Animate with a Snap and duration of 0.8s
Next, wire the back card to the artboard with the front card
Set the trigger as a Tap, make it Auto-Animate with an Ease Out and duration of 0.8s
I will also add an interaction to dismiss the modal offer
Set the trigger as a Tap, make it Transition as a Dissolve with an Ease Out and duration of 0.2s
Great! We're set, let's preview our 3D card flip!
If you enjoy these videos don't forget to comment, like and subscribe for more!