Description
I propose adding a new animated component to the framework: 3D Flip Cards. This component will allow developers to create cards with a "front" and "back" side. The cards will smoothly flip in 3D space when a user hovers over them (or clicks them via a CSS-only checkbox hack), revealing the hidden content on the back.
This is a visually striking, highly engaging UI pattern that perfectly aligns with EaseMotion's "animation-first" framework philosophy.
Why is this useful for EaseMotion CSS?
Flip cards are incredibly popular for pricing tiers, team member profiles, and feature highlights because they save vertical space while adding a layer of interactivity. Implementing 3D transformations (perspective, transform-style: preserve-3d, and backface-visibility) from scratch is notoriously tricky and cross-browser finicky. By providing a pre-built, robust .ease-flip-card component, EaseMotion gives developers instant access to premium, hardware-accelerated 3D animations without needing to write a single line of JS.
HTML Snippet
html
<!-- Front Side -->
<div class="ease-flip-card-front ease-card ease-card-shadow">
<h3 class="ease-text-lg ease-font-bold">Hover Me</h3>
<p class="ease-text-muted">I have a secret on the back.</p>
</div>
<!-- Back Side -->
<div class="ease-flip-card-back ease-card ease-card-primary">
<h3 class="ease-text-lg ease-font-bold">The Secret</h3>
<p>This flip was entirely hardware accelerated.</p>
</div>
Click to Flip
Click to Flip Back
CSS Snippet
css
/* Container provides perspective for the 3D effect */
.ease-flip-card {
background-color: transparent;
width: 100%;
max-width: 300px;
height: 400px;
perspective: 1000px; /* How extreme the 3D effect is */
display: inline-block;
}
/* Inner wrapper controls the flip */
.ease-flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform var(--ease-speed-slow) var(--ease-ease);
transform-style: preserve-3d; /* Keep child elements in 3D space */
}
/* Hover trigger */
.ease-flip-card-hover:hover .ease-flip-card-inner {
transform: rotateY(180deg);
}
/* Checkbox trigger (Click to flip) */
.ease-flip-card-checkbox {
display: none;
}
.ease-flip-card-checkbox:checked ~ .ease-flip-card-inner {
transform: rotateY(180deg);
}
/* Front and Back common styles */
.ease-flip-card-front,
.ease-flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden; /* Hides the back of the element when flipped */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: var(--ease-space-6);
border-radius: var(--ease-radius-lg);
margin: 0; /* Override base card margins */
}
/* Front starts facing the user */
.ease-flip-card-front {
background-color: var(--ease-color-surface);
color: var(--ease-color-text);
z-index: 2; /* Ensures front stays on top during initialization */
}
/* Back starts already flipped 180deg */
.ease-flip-card-back {
background-color: var(--ease-color-primary);
color: white;
transform: rotateY(180deg);
}
/* Vertical Flip Variant (Optional helper) */
.ease-flip-card-hover-y:hover .ease-flip-card-inner {
transform: rotateX(180deg);
}
.ease-flip-card-y .ease-flip-card-back {
transform: rotateX(180deg);
}
Visual Reference (optional)
N/A
Checklist
I have read the
CONTRIBUTING.md
document.
I have checked for existing issues proposing the same feature.
I understand that my proposed class names or structure may be modified by the maintainer.
Description
I propose adding a new animated component to the framework: 3D Flip Cards. This component will allow developers to create cards with a "front" and "back" side. The cards will smoothly flip in 3D space when a user hovers over them (or clicks them via a CSS-only checkbox hack), revealing the hidden content on the back.
This is a visually striking, highly engaging UI pattern that perfectly aligns with EaseMotion's "animation-first" framework philosophy.
Why is this useful for EaseMotion CSS?
Flip cards are incredibly popular for pricing tiers, team member profiles, and feature highlights because they save vertical space while adding a layer of interactivity. Implementing 3D transformations (perspective, transform-style: preserve-3d, and backface-visibility) from scratch is notoriously tricky and cross-browser finicky. By providing a pre-built, robust .ease-flip-card component, EaseMotion gives developers instant access to premium, hardware-accelerated 3D animations without needing to write a single line of JS.
HTML Snippet
html
Checklist
I have read the
CONTRIBUTING.md
document.
I have checked for existing issues proposing the same feature.
I understand that my proposed class names or structure may be modified by the maintainer.