3D Social Flip Card Animation

Hello Coders! Welcome to CSS Animation Blog. In this, let's create a social icons card that flips vertically on mouse hover. This is a fun animation which allows you to learn the basic animations and let's you understand how the mechanism works while using the "perspective" property.

Here's a preview -

3D Flip Cards.gif

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


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>3D Flip Cards</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
<div class="container">
    <div class="card">
        <div class="face face--front"><i class="fa-brands fa-facebook"></i></div>
        <div class="face face--back">facebook</div>
    </div>
    <div class="card">
        <div class="face face--front"><i class="fa-brands fa-twitter"></i></div>
        <div class="face face--back">twitter</div>
    </div>
    <div class="card">
        <div class="face face--front"><i class="fa-brands fa-linkedin"></i></div>
        <div class="face face--back">linkedin</div>
    </div>
    <div class="card">
        <div class="face face--front"><i class="fa-brands fa-codepen"></i></div>
        <div class="face face--back">codepen</div>
    </div>
    <div class="card">
        <div class="face face--front"><i class="fa-brands fa-github"></i></div>
        <div class="face face--back">github</div>
    </div>
</div>

<script src="https://kit.fontawesome.com/634feab991.js" crossorigin="anonymous"></script>
</body>
</html>

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

CSS

.container {
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    background: #f6f7fc;
  }
  .card {
    position: relative;
    width: 8rem;
    height: 8rem;
    margin: 0.5rem;
    text-align: center;
    line-height: 8rem;
    color: #ecf0f1;
    font-family: verdana;
    border-radius: 0.8rem;
    transform-style: preserve-3d;
  }
  .face {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.8rem;
    background-size: cover;
    backface-visibility: hidden;
    background-position: center center;
    transition: transform 0.5s ease-in-out;
  }
  .face--front {
    background: #2c3e50;
    font-size: 3rem;
  }
  .face--back {
    background: #2c3e50;
    font-size: 1.5rem;
    transform: rotateX(180deg);
  }
  .card:hover .face--front {
    transform: rotateX(-180deg);
  }
  .card:hover .face--back {
    transform: rotateX(0deg);
  }

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