Projects

CSS Flip Card

How to create a Flip Card with CSS

Learn how to create a flip card. This project is created using only HTML and CSS. You can copy the code here on our website or use the link to see it on our codepen account.

Try on Codepen

HTML code

<html>
  <head><link href="https://fonts.googleapis.com/css?family=Indie+Flower&amp;display=swap" rel="stylesheet"></head>
  <body>
    
    <div class="container">
      <div class="card">
      <div class="the-front"><img src="https://images.unsplash.com/photo-1524772128034-3ecf9a73cbe9?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt=""></div>
      <div class="the-back">
        <h1>Alita Doe</h1>
        <p>Did you just say "deep space" ?</p>
        </div>
        </div>
    </div>
  </body>
</html>

CSS code

body {
  background: #b2bec3;
}

.container  {
    position: absolute;
  width: 250px;
  height: 320px;
  background: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.card {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  transform-style: preserve-3d;
  transition: all 1s ease;
}
/*img */
img {
  display: block;
  width: 100%;
  height: 100%;
}

.card:hover{
  transform: rotateY(180deg);
}

/* THE FRONT FACE OF THE CARD, WHICH SHOWS BY DEFAULT */
 .the-front{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  backface-visibility: hidden;
  overflow: hidden;
  background: #ffc728;
  color: #000;
}

.the-back{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  backface-visibility: hidden;
  overflow: hidden;
  background: #fcfcfc;
  color: #333;
  text-align: center;
  transform: rotateY(180deg);
}


.the-back h1{
  font-family: 'İndie Flower', cursive;
  padding: 30px;
  font-weight: bold;
  font-size: 24px;
  text-align: center;
}

 .the-back p {
  font-family: sans-serif;
  padding: 30px;
  font-weight: normal;
  font-size: 20px;
  text-align: center;
}