How to Rotate a 3D CSS Card on Hover Using Only CSS?

CSS Flippable 3D Card Effect on Hover

In this tutorial, we aim to achieve a 3D card flip effect using solely CSS. The card will rotate smoothly from its front to its back face upon hovering over it.

Code Implementation:

<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:

1. We start by defining a container class .card with the desired height, width, and perspective.
2. Inside the .card container, we create two child elements: .front and .back to represent the front and back faces of the card.
3. We position both .front and .back absolutely within the .card container and set their dimensions to 100% width and height.
4. We apply a transition to the transform property of both elements to enable smooth rotation on hover.
5. To prevent flickering during the flip animation, we set backface-visibility to hidden and transform-style to preserve-3d.
6. Initially, the back face is rotated along the Y axis by 180 degrees using transform: rotateY(180deg);.
7. On hover, we rotate the front face 180 degrees and the back face 360 degrees to complete the flip.

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