How to Effortlessly Flip a 3D Card Using Pure CSS?

Flip a 3D Card with CSS, Effortlessly

Flipping cards with eye-catching 3D effects can elevate user experiences. In this article, we'll delve into creating a hover-activated card flip animation using solely CSS.

To get started, let's look at an example code that simplifies the implementation while maintaining the intended effect:

.card {<br>  position: relative;<br>  width: 50vh;<br>  height: 80vh;<br>  perspective: 500px;<br>  margin: 10vh auto 50vh;<br>}</p>
<p>.front,<br>.back {<br>  position: absolute;<br>  width: 100%;<br>  height: 100%;<br>  transition: transform 1s;<br>  backface-visibility: hidden;<br>  transform-style: preserve-3d;<br>}</p>
<p>.front {<br>  background-color: #66ccff;<br>}</p>
<p>.back {<br>  background-color: #dd8800;<br>  transform: rotateY(180deg);<br>}</p>
<p>.card:hover .front {<br>  transform: rotateY(180deg);<br>}</p>
<p>.card:hover .back {<br>  transform: rotateY(360deg);<br>}

<div class="card"><br>  <div class="front"><span>Front</span></div><br>  <div class="back"><span>Back</span></div><br></div>

This code creates a card with two faces: Front and Back. The flip effect is triggered on hover. Hovering over the card will cause the Front face to rotate 180 degrees and the Back face to rotate 360 degrees.

The key to this animation lies in the combination of CSS properties like perspective, transform-style, transform, and transition. These properties work together to create the illusion of a 3D object.

By implementing this code, you can now create beautiful and engaging 3D card flip effects on your website, enhancing visual appeal and user interaction.

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