Let’s delve into a captivating flipping card animation crafted using CSS and HTML. This animation brings a dynamic and interactive element to web design, adding depth and engagement to user interactions.
HTML Structure:
The HTML structure consists of a wrapper element with a nested content div. Within the content div, there are two face divs representing the front and back faces of the card.
<div class="wrapper">
<div class="content">
<div class="front-face">
<div class="bg-front"></div>
<h1>Title</h1>
<img src="https://assets.codepen.io/4787486/type-blocks-cropped.png" alt="" />
<p>Our specialty since 1955</p>
<p>Read more ></p>
</div>
<div class="back-face">
<div class="bg-back"></div>
<h1>Lorem Ipsum</h1>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book (so legend has it).
</div>
</div>
</div>CSS Styling:
The CSS styles are pivotal in defining the appearance and behavior of the flipping card animation. Here’s a breakdown of the key CSS components:
@import url("https://fonts.googleapis.com/css2?family=Belleza&display=swap");
.wrapper {
margin-top: 1rem;
perspective: 1500px;
}
.content {
position: relative;
width: 350px;
height: 450px;
background: grey;
border-radius: 10px;
transform-style: preserve-3d;
transition: transform 1s cubic-bezier(0.33, -0.05, 0.62, 1.4);
animation: flip-once 4s cubic-bezier(0.33, -0.05, 0.62, 1.4) 1;
}
@keyframes flip-once {
40%,
60% {
transform: rotateY(180deg);
}
}
.wrapper:hover .content {
cursor: pointer;
transform: rotateY(180deg);
}
.front-face,
.back-face {
display: flex;
flex-direction: column;
height: 450px;
width: 350px;
padding: 3rem 2rem 2rem;
border: 4px solid #000;
border-radius: 10px;
box-shadow: 5px 5px 40px -5px rgba(0 0 0 / 1);
transform-style: preserve-3d;
}
.front-face .bg-front,
.back-face .bg-back {
position: absolute;
top: 1%;
left: 1%;
height: 98%;
width: 98%;
border-radius: 5px;
transform-style: preserve-3d;
transform: translateZ(30px);
}
.front-face .bg-front {
background: blue;
}
.back-face .bg-back {
background: green;
}
.front-face {
background: dodgerblue;
}
.back-face {
backface-visibility: hidden;
transform: rotateY(180deg);
position: absolute;
top: 0;
left: 0;
background: lightgreen;
}
img {
max-width: 300px;
margin: 2rem 0;
}
h1 {
font-size: 2.5rem;
line-height: 1;
padding-bottom: 20px;
border-bottom: 3px solid white;
}
p {
font-size: 1.35rem;
line-height: 1.5;
margin: 2rem 0;
}
h1,
p,
img {
transform: translateZ(70px);
}
.front-face p {
translate: 0 -2rem;
}
/* body styling and reset */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
position: relative;
min-height: 100vh;
display: grid;
place-items: center;
background-color: #0D1117;
font-family: "Belleza", sans-serif;
font-size: 18pt;
text-align: center;
color: #fff;
}
.link {
font-size: 1rem;
}
.link a {
color: cyan;
text-decoration: none;
}
.link a:hover {
color: white;
text-decoration: underline;
}- Global Styles: Resets default browser styles and sets the overall layout and typography.
- Wrapper and Content Styles: Styles the wrapper and content divs, applying perspective and transition effects for the 3D animation.
- Front and Back Face Styles: Defines the appearance of the front and back faces of the card, including background color, border, shadow, and 3D transformation properties.
- Image and Text Styling: Styles the image and text elements within the card faces, applying transforms to create a 3D effect.
- Hover Interaction: Triggers the card flip animation on hover, enhancing user interactivity and engagement.
Animation Effects:
- Flip Animation: Utilizes keyframes and the
transformproperty to create a flip animation effect when hovering over the card. The card rotates 180 degrees around the Y-axis, revealing the back face. - Shadow and Border Effects: Adds subtle shadow and border effects to enhance the visual presentation of the card and create a sense of depth.
- Text and Image Transforms: Applies
translateZtransforms to text and image elements to simulate depth perception and maintain consistency with the 3D animation.
Conclusion:
In summary, this flipping card animation exemplifies the creative possibilities of CSS and HTML in crafting immersive and interactive web experiences. By leveraging 3D transforms, transitions, and keyframe animations, developers can elevate the visual appeal and engagement of their websites. Whether used for product showcases, portfolio displays, or informational cards, this animation technique adds a dynamic touch that captivates users and creates memorable interactions.
Happy Coding!
