How to Implement CSS3 Card 3D Flip Animation

How to Implement CSS3 Card 3D Flip Animation: BY Arthur13 Nov,2020; Tags:
3D Animation CSS3 3D

Introduction

Many modern websites now like to use a card style, that is, the title, content and theme pictures of the article are made into cards on the home page. Today’s card animation is based on CSS3. The elements in the card can be any HTML element. What’s more special here is that a 3D button is displayed below the text. At the same time, when we roll the mouse over the card, the card will present a 3D flip animation.

Instructions

HTML Body Code

<div class="back">
      <div>
        <p>Consectetur Adipisicing Elit. Possimus, Praesentium?</p>
        <p>Provident Consectetur Natus Voluptatem Quis Tenetur Sed Beatae Eius Sint.</p>
        <button class="button">Click Here</button>
      </div>
    </div></a><a class="card" href="#!">
    <div class="front" style="background-image: url(img/560.jpg);">
      <p>Lorem Ipsum Dolor Sit Amet Consectetur Adipisi.</p>
    </div>
    <div class="back">
      <div>
        <p>Consectetur Adipisicing Elit. Possimus, Praesentium?</p>
        <p>Provident Consectetur Natus Voluptatem Quis Tenetur Sed Beatae Eius Sint.</p>
        <button class="button">Click Here</button>
      </div>
    </div></a><a class="card" href="#!">
    <div class="front" style="background-image: url(img/567.jpg);">
      <p>Lorem Ipsum Dolor Sit Amet Consectetur Adipisi.</p>
    </div>

Css Code

*, *:before, *:after {
  box-sizing: border-box;
}

html {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 300;
  color: #333;
  font-family: "Nunito Sans", sans-serif;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background-color: #ecf0f9;
  background-attachment: fixed;
}

.content {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1000px;
}

.heading {
  width: 100%;
  margin-left: 1rem;
  font-weight: 900;
  font-size: 1.618rem;
  text-transform: uppercase;
  letter-spacing: .1ch;
  line-height: 1;
  padding-bottom: .5em;
  margin-bottom: 1rem;
  position: relative;
}

VIEW NOW