Problem description

Given an HTML page containing a div class card which contains another div class card-inner. The div class card-inner contains two div classes, card-front and card-back.

Write CSS to:

• Set .card to establish a perspective (e.g., 1000px).

• Style .card-inner with transform-style: preserve-3d, a smooth transition (e.g., 0.6s ease), and transform origin centered.

• Position .card-front and .card-back absolutely, full-size to overlap.

• Hide the backface of each side with backface-visibility: hidden.

• Rotate .card-back by rotateY(180deg) initially so it’s hidden.

• On hover of .card, apply a rotateY(180deg) transform to .card-inner to flip and reveal the backface.

Goal

Implement CSS-only interactivity so hovering over the card flips it in 3D, toggling between front and back faces.

Constraints

• Use only CSS (no JavaScript).

• Card size should be width: 300px; height: 200px;.

• Perspective on container should be 1000px.

• Transition on .card-inner should be 0.6s ease.

• Use transform-style: preserve-3d and backface-visibility: hidden.

• Rotate backface by 180deg.

• Flip on .card:hover .card-inner.

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.