3D Flip Card — Playground

✦

UnysonPlus

Flip to reveal the back

hover the card to flip

Trigger & timing

Flip on

Auto interval (s) 3

Auto trigger only

Flip speed (s) 0.6

Direction / axis

3D depth (perspective px) 1400

lower = more dramatic

Easing

Card

Card height (px) 260

Corner radius (px) 16

Back content align

Back face

Back heading

Back text

Back image

Back button text

Back background #2f74e6

Back text color #ffffff

Sample option — updates as you tweak

'flip_card' => [
    'type'  => 'multi-picker',
    'value' => [
        'mode' => 'flip',
        'flip' => [
            'trigger' => 'hover',
            'auto_interval' => 3,
            'direction' => 'h',
            'min_height' => 260,
            'duration' => 0.6,
            'perspective' => 1400,
            'easing' => 'smooth',
            'radius' => 16,
            'back_align' => 'center',
            'back_heading' => 'Build faster',
            'back_text' => 'Drag & drop page building.\nNo code required.',
            'back_image' => [],
            'back_btn_text' => 'Learn more',
            'back_bg' => [ 'predefined' => '', 'custom' => '#2f74e6' ],
            'back_color' => [ 'predefined' => '', 'custom' => '#ffffff' ],
        ],
    ],
],

Back colors use the theme color-preset picker; the resolved color is shown here.

Pick a style (on the right), then tweak the flip. Everything here runs the real module — the same CSS 3D transforms, the JS-built back face, and the exact .sc-flip* classes / --flip-* variables the builder outputs. With Hover you flip by hovering; Click toggles on click/tap; Scroll flips once on load (hit ↻ Replay to reset); Auto flips on a loop. The Sample option updates as you tweak.

The front is your element, the back is built for you

On a real page the element's own content becomes the front face; the back face is assembled from the options here (heading, text, optional image + button, colours). It's pure CSS 3D — no library — and the click trigger is keyboard-accessible.

How the option is stored

3D Flip Card is a multi-picker whose picker is the style (mode); the back-face and motion settings live in a nested map keyed by that style:

'flip_card' => [
    'type'  => 'multi-picker',
    'value' => [
        'mode' => 'flip',
        'flip' => [
            'trigger' => 'hover',
            'direction' => 'h',
            'back_heading' => 'Build faster',
            'back_bg' => [ 'predefined' => '', 'custom' => '#2f74e6' ],
        ],
    ],
],

← Back to 3D Flip Card

How the option is stored​

How the option is stored