< Return

How to Create a 3D Flipping Card with Glowing Animation Using HTML and CSS

Interactive cards add life and style to modern websites. In this tutorial, you’ll learn how to build a 3D flipping card with glowing edges and smooth hover animation using only HTML and CSS — no JavaScript required.

Step 1: Structure the HTML

Start by creating the main container .card and a .content div inside it. Within .content, add two sides — the .front and the .back. The front will show the static content, while the back will appear after the card flips.

Step 2: Center the Card with Flexbox

Use Flexbox to center your card perfectly on the screen. Apply display: flex;, justify-content: center;, and align-items: center; to the body, and set a dark background to make the glow stand out.

Step 3: Style the Card and Apply 3D Perspective

The .content element uses transform-style: preserve-3d and a rotation transition. When hovered, it rotates 180 degrees on the Y-axis, revealing the back side. Add a soft shadow to make it pop from the background.

Step 4: Design the Front Face

The front side includes animated glowing circles and a message section. The floating circles are achieved using the @keyframes floating animation, creating a smooth up-and-down motion that feels alive.

Step 5: Create the Animated Back Side

The back side (.back) features a gradient line that rotates infinitely using the @keyframes rotation_481 animation. The .back-content section sits on top of this animation, holding your logo and a call-to-action like “Hover Me”.

Step 6: Add the Flip Effect on Hover

Use this simple CSS rule:

.card:hover .content { transform: rotateY(180deg); }

This triggers the rotation, smoothly flipping the card to reveal its back.

Step 7: Final Touches

Adjust colors, blur levels, and animation speed to match your website’s style. You can also replace the logo with your own image by updating the <img src="Picture1(1).png"> line.

Conclusion

You’ve now created a professional 3D flipping card that looks amazing on any modern website. It’s responsive, lightweight, and adds a futuristic touch to your portfolio, profile, or landing page. Experiment with different gradients and timings to make your version unique.