A card that turns over

A card comes forward, turns over to show its back, and settles again.

<div id="stage" data-composition-id="turn"     data-start="0" data-duration="3" data-width="1280" data-height="720" data-fps="30">
    <div class="layer" data-component="turn" data-start="0" data-duration="3">
        <div class="card" data-bind-style="card">
            <div class="face">Question</div>
            <div class="face back">Answer</div>
        </div>
    </div>
</div>
                

const { scene } = wildflower.kinetic;

scene('turn', {
    keyframes: {
        card: {
            perspective: { at: [0, 3], to: [1200, 1200] },
            translateZ:  { at: [1, 1.4, 1.8], to: [0, 120, 0], ease: ['power2.out', 'power2.in'] },
            rotateY:     { at: [1, 1.8], to: [0, 180], ease: 'power3.inOut' },
        },
    },
});
                

html, body { margin: 0; background: #0a0b10; }

#stage { position: relative; overflow: hidden; background: #14122a; }

.layer { position: absolute; inset: 0; }

.card { position: absolute; left: 490px; top: 160px; width: 300px; height: 400px; transform-style: preserve-3d; }
.face { position: absolute; inset: 0; backface-visibility: hidden; }
.back { transform: rotateY(180deg); }

.face { display: grid; place-items: center; border-radius: 20px; background: #f4f1ff; color: #1b1530; font: 600 44px system-ui, sans-serif; }
.back { background: #f5c542; }

[data-composition-id]:not([data-kinetic-ready]) { visibility: hidden; }
                

The card has transform-style: preserve-3d, so its two faces turn with it in 3D. Each face has backface-visibility: hidden, so a face turned away is not drawn, and the back face starts turned 180 degrees, so the turn brings it to the front.

rotateY turns the card about its vertical axis and translateZ brings it toward the viewer during the turn, both under perspective, which Kinetic writes first in the transform. A track that holds one value, such as perspective, has two equal keyframes.

A card that turns over

More in Shapes and paths