Card Flip Reflection Animation

Hello Coders! Welcome to CSS Animation Blog. In this, we're going to see how to create a cool card animation. When you hover over the card, you can see the card flipping as if it's rotating along with the reflection. This is the best example if you want to learn how to create custom animation using just CSS.

Here's a preview

That being said, let us get started.

Step - 1: Like always, create 2 files - index.html and style.css.

Step - 2: Copy the below HTML code and paste it into your code editor.

HTML


<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Card Flip Reflection</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<div class="container">
  <div class="card">
    <div class="item front-side">
      <img src="https://images.pexels.com/photos/3747139/pexels-photo-3747139.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
    </div>
    <div class="item back-side">
      <img src="https://images.pexels.com/photos/5475809/pexels-photo-5475809.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
    </div>
  </div>
  <div class="card">
    <div class="item front-side">
      <img src="https://images.pexels.com/photos/4792733/pexels-photo-4792733.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
    </div>
    <div class="item back-side">
      <img src="https://images.pexels.com/photos/5935788/pexels-photo-5935788.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
    </div>
  </div>
</div>

</body>
</html>

Step - 3: Below is the CSS code for styling.

CSS


body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: black;
}
.container {
    width: 1000px;
    display: flex;
    justify-content: space-evenly;
    perspective: 800px;
}
.container .card {
    position: relative;
    width: 240px;
    height: 300px;
    color: white;
    cursor: pointer;
    border-radius: 50px; 
    transition: 1s ease-in-out;
    transform-style: preserve-3d;
}
.container .card:hover {
    transform: rotateY(0.5turn);
}
.container .card .item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: 1s ease-in-out;
    -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4));
}
.container .card .item img {
    width: 240px;
    height: 300px;
    object-fit: cover;
}
.container .card .back-side {
    transform: rotateY(0.5turn);
}

And that's it. You're done.

Let me know in the comments if you have any doubt related to this.

Follow @creocodigo for more projects and web related content.

If you find this useful, below are some other posts that I am sure you'll love