How to Achieve a 3D Card Flipping Effect Using Only CSS?

How to Flip a 3D Card with CSS

The task is to create a 3D card flipping effect using only CSS, where the card flips vertically on hover.

CSS-Only Flip Effect

To simplify the implementation, we'll use the following CSS code:

<code class="css">.card {
  position: relative;
  width: 50vh;
  height: 80vh;
  perspective: 500px;
  margin: 10vh auto 50vh;
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 1s;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.front {
  background-color: #66ccff;
}

.back {
  background-color: #dd8800;
  transform: rotateY(180deg);
}

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

.card:hover .back {
  transform: rotateY(360deg);
}</code>

Explanation

The card container has a perspective applied to it, giving it the illusion of 3D space. Both the front and back faces are absolutely positioned within the container. They are also transformed to hide their back faces and preserve their 3D nature.

When the mouse hovers over the card, the following transformations occur:

• The front face rotates 180 degrees around the Y axis, revealing the back face.
• The back face rotates 360 degrees around the Y axis, completing the flip.

This CSS-only technique allows for a smooth and realistic 3D card flipping effect on hover.

The above is the detailed content of How to Achieve a 3D Card Flipping Effect Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!