Problem description

Given HTML markup for a .flip-card container with nested .flip-card-inner, .flip-card-front, and .flip-card-back elements, write CSS to:

• Set up a 3D context using perspective on the container.

• Style .flip-card-inner to preserve 3D children and animate a 180° Y-axis rotation on hover.

• Style both front and backfaces with glassmorphic backgrounds (rgba(255,255,255,0.2)), backdrop-filter: blur(8px), rounded corners, and subtle shadows.

• Ensure backface-visibility is hidden and the backface is rotated properly to appear when flipped.

Goal

Implement CSS rules for 3D perspective, transform-style, smooth transition for flipping, and glassmorphic styling on both faces of the card.

Constraints

• Use only CSS (no JavaScript).

• Card dimensions should be width 300px, height 200px.

• Container perspective should be 1000px.

• Transition duration should be 0.6s ease-in-out.

• Background for both faces should be rgba(255, 255, 255, 0.2) with backdrop-filter: blur(8px).

• Border-radius should be 12px; box-shadow for depth.

• Hide backface with backface-visibility: hidden.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.