Create a Flip Card With CSS

How To Create a Flip Card With CSS

How To Create a Flip Card With CSS

Hello everyone. Welcome to today’s tutorial. We’ll Learn How To make flipping cards In Today’s Session.

We Will Use HTML and CSS To Complete This Flipping Cards Project, Sometimes you want to include some tips and tricks in your webpage so for that using cards is the best way it is short and fulfill the requirement of the content. Instead of defining it under plain text or just leaving it with simple styling.

We’ll show you How To Create a Flip Card With CSS with complete source code available for you so you just copy and paste it into your project.

I hope you have a general idea of what the project entails. In our article, we will go over this project step by step.

HTML Code for Flipping Cards

<div class="grids">
  <div class="card-one">
    <div class="card">
      <div class="card__side card__side--front" id="front-1">
        <div class="text-box">
          <h3 class="text-box-top">Flipping Cards</h3>
          <h1 class="text-box-middle">Awesome!</h1>
          <h3 class="text-box-lower">--- More Text ---</h3>
        </div>
      </div>
      <div class="card__side card__side--back" id="back-1">
        <div class="text-box">
          <h3 class="text-box-top">Cards Flipped</h3>
          <h1 class="text-box-middle">Great!</h1>
          <h3 class="text-box-lower">--- More Text ---</h3>
        </div>
      </div>
    </div>
  </div>
  <div class="card-two">
    <div class="card">
      <div class="card__side card__side--front" id="front-2">
        <div class="text-box">
          <h3 class="text-box-top">Flipping Cards</h3>
          <h1 class="text-box-middle">Awesome!</h1>
          <h3 class="text-box-lower">--- More Text ---</h3>
        </div>
      </div>
      <div class="card__side card__side--back" id="back-2">
        <div class="text-box">
          <h3 class="text-box-top">Cards Flipped</h3>
          <h1 class="text-box-middle">Great!</h1>
          <h3 class="text-box-lower">--- More Text ---</h3>
        </div>
      </div>
    </div>
  </div>
  <div class="card-three">
    <div class="card">
      <div class="card__side card__side--front" id="front-3">
        <div class="text-box">
          <h3 class="text-box-top">Flipping Cards</h3>
          <h1 class="text-box-middle">Awesome!</h1>
          <h3 class="text-box-lower">--- More Text ---</h3>
        </div>
      </div>
      <div class="card__side card__side--back" id="back-3">
        <div class="text-box">
          <h3 class="text-box-top">Cards Flipped</h3>
          <h1 class="text-box-middle">Great!</h1>
          <h3 class="text-box-lower">--- More Text ---</h3>
        </div>
      </div>
    </div>
  </div>
  <div class="card-four">
    <div class="card">
      <div class="card__side card__side--front" id="front-4">
        <div class="text-box">
          <h3 class="text-box-top">Flipping Cards</h3>
          <h1 class="text-box-middle">Awesome!</h1>
          <h3 class="text-box-lower">--- More Text ---</h3>
        </div>
      </div>
      <div class="card__side card__side--back" id="back-4">
        <div class="text-box">
          <h3 class="text-box-top">Cards Flipped</h3>
          <h1 class="text-box-middle">Great!</h1>
          <h3 class="text-box-lower">--- More Text ---</h3>
        </div>
      </div>
    </div>
  </div>
  <div class="card-five">
    <div class="card">
      <div class="card__side card__side--front" id="front-5">
        <div class="text-box">
          <h3 class="text-box-top">Flipping Cards</h3>
          <h1 class="text-box-middle">Awesome!</h1>
          <h3 class="text-box-lower">--- More Text ---</h3>
        </div>
      </div>
      <div class="card__side card__side--back" id="back-5">
        <div class="text-box">
          <h3 class="text-box-top">Cards Flipped</h3>
          <h1 class="text-box-middle">Great!</h1>
          <h3 class="text-box-lower">--- More Text ---</h3>
        </div>
      </div>
    </div>
  </div>
  <div class="card-six">
    <div class="card">
      <div class="card__side card__side--front" id="front-6">
        <div class="text-box">
          <h3 class="text-box-top">Flipping Cards</h3>
          <h1 class="text-box-middle">Awesome!</h1>
          <h3 class="text-box-lower">--- More Text ---</h3>
        </div>
      </div>
      <div class="card__side card__side--back" id="back-6">
        <div class="text-box">
          <h3 class="text-box-top">Cards Flipped</h3>
          <h1 class="text-box-middle">Great!</h1>
          <h3 class="text-box-lower">--- More Text ---</h3>
        </div>
      </div>
    </div>
  </div>
  <div class="card-seven">
    <div class="card">
      <div class="card__side card__side--front" id="front-7">
        <div class="text-box">
          <h3 class="text-box-top">Flipping Cards</h3>
          <h1 class="text-box-middle">Awesome!</h1>
          <h3 class="text-box-lower">--- More Text ---</h3>
        </div>
      </div>
      <div class="card__side card__side--back" id="back-7">
        <div class="text-box">
          <h3 class="text-box-top">Cards Flipped</h3>
          <h1 class="text-box-middle">Great!</h1>
          <h3 class="text-box-lower">--- More Text ---</h3>
        </div>
      </div>
    </div>
  </div>
</div>

In this HTML Code, we have defined the structure in which we created the card and defined the content for it with suitable heading tags and we called them a class so that they can be called later for styling. Let us code the CSS part to style the project.

Simple tic-tac-toe javascript | Tic Tac Toe game HTML

CSS Code for Flipping Cards

@import url("https://fonts.googleapis.com/css?family=Rubik:400,700&display=swap");

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 48.5%;
}

body {
  background: orange;
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  padding: 3rem;
  box-sizing: border-box;
}

.grids {
  max-width: 136rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
}

.card-one {
  grid-column: 1/4;
}

.card-two {
  grid-column: 1/4;
}

.card-three {
  grid-column: 1/4;
}

.card-four {
  grid-column: 1/4;
}

.card-five {
  grid-column: 1/4;
}

.card-six {
  grid-column: 1/4;
}

.card-seven {
  grid-column: 1/4;
}

.card {
  perspective: 150rem;
  -moz-perspective: 150rem;
  position: relative;
  height: 25rem;
  width: 100%;
  transition: all ease-in-out 400ms;
  cursor: pointer;
}

.card:hover {
  transform: scale(1.05);
}

.card:active {
  transform: translateY(-1px);
}

.card__side {
  transition: all 0.8s ease;
  color: white;
  font-size: 2rem;
  position: absolute;
  top: 0;
  left: 0;
  height: 25rem;
  width: 100%;
  backface-visibility: hidden;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.4);
  border-radius: 8px;
}

.card__side--front {
  background-color: #2196f3;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.card__side--back {
  background-color: #303f9f;
  transform: rotateY(180deg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.showGreen {
  transform: rotateY(-180deg);
}

.showRed {
  transform: rotateY(0);
}

.text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}

.text-box-top {
  font-size: 2.2rem;
  text-shadow: 2px 2px 10px #0000006c;
  font-weight: 400;
}

.text-box-middle {
  font-size: 5.5rem;
  font-weight: 700;
  text-shadow: 2px 2px 10px #0000006c;
}

.text-box-lower {
  font-size: 2rem;
  text-shadow: 2px 2px 10px #0000006c;
  font-weight: 400;
}

.heading {
  transition: all 0.6s linear;
}

.hide {
  visibility: hidden;
  opacity: 0;
}

.show {
  visibility: visible;
  opacity: 1;
}

#front-1 {
  background-image: linear-gradient(
      rgba(204, 30, 88, 0.6),
      rgba(20, 20, 20, 0.6)
    ),
    url("https://images.unsplash.com/photo-1527529482837-4698179dc6ce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=80");
}

#front-2 {
  background-image: linear-gradient(
      rgba(31, 136, 168, 0.767),
      rgba(14, 46, 65, 0.9)
    ),
    url("https://images.unsplash.com/photo-1508599804355-8ce5238b44b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=80");
}

#front-3 {
  background-image: linear-gradient(
      rgba(84, 86, 175, 0.9),
      rgba(27, 27, 85, 0.9)
    ),
    url("https://images.unsplash.com/photo-1499914485622-a88fac536970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=80");
}

#front-4 {
  background-image: linear-gradient(
      rgba(74, 190, 122, 0.767),
      rgba(6, 66, 48, 0.9)
    ),
    url("https://images.unsplash.com/photo-1531206715517-5c0ba140b2b8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80");
}

#front-5 {
  background-image: linear-gradient(
      rgba(128, 74, 190, 0.767),
      rgba(42, 6, 66, 0.9)
    ),
    url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
}

#front-6 {
  background-image: linear-gradient(
      rgba(214, 21, 86, 0.801),
      rgba(20, 20, 20, 0.6)
    ),
    url("https://images.unsplash.com/photo-1491438590914-bc09fcaaf77a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
}

#front-7 {
  background-image: linear-gradient(
      rgba(31, 136, 168, 0.767),
      rgba(14, 46, 65, 0.9)
    ),
    url("https://images.unsplash.com/photo-1520881363902-a0ff4e722963?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
}

/* Back */

#back-1 {
  background-image: linear-gradient(
      rgba(204, 30, 88, 0.6),
      rgba(20, 20, 20, 0.6)
    ),
    url("https://images.unsplash.com/photo-1527529482837-4698179dc6ce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=80");
}

#back-2 {
  background-image: linear-gradient(
      rgba(31, 136, 168, 0.767),
      rgba(14, 46, 65, 0.9)
    ),
    url("https://images.unsplash.com/photo-1508599804355-8ce5238b44b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=80");
}

#back-3 {
  background-image: linear-gradient(
      rgba(84, 86, 175, 0.9),
      rgba(27, 27, 85, 0.9)
    ),
    url("https://images.unsplash.com/photo-1499914485622-a88fac536970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=80");
}

#back-4 {
  background-image: linear-gradient(
      rgba(74, 190, 122, 0.767),
      rgba(6, 66, 48, 0.9)
    ),
    url("https://images.unsplash.com/photo-1531206715517-5c0ba140b2b8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80");
}

#back-5 {
  background-image: linear-gradient(
      rgba(128, 74, 190, 0.767),
      rgba(42, 6, 66, 0.9)
    ),
    url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
}

#back-6 {
  background-image: linear-gradient(
      rgba(214, 21, 86, 0.801),
      rgba(20, 20, 20, 0.6)
    ),
    url("https://images.unsplash.com/photo-1491438590914-bc09fcaaf77a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
}

#back-7 {
  background-image: linear-gradient(
      rgba(31, 136, 168, 0.767),
      rgba(14, 46, 65, 0.9)
    ),
    url("https://images.unsplash.com/photo-1520881363902-a0ff4e722963?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
}

@media screen and (min-width: 1024px) {
  html {
    font-size: 62.5%;
  }

  .grids {
    max-width: 136rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
  }

  .card-one {
    grid-column: 1/3;
  }

  .card-two {
    grid-column: 3/4;
  }

  .card-three {
    grid-column: 1/2;
  }

  .card-four {
    grid-column: 2/2;
  }

  .card-five {
    grid-column: 3/4;
  }

  .card-six {
    grid-column: 1/2;
  }

  .card-seven {
    grid-column: 2/4;
  }
}

In this CSS code, we have styled the body and its attributes and then we have called the image via a link, and then padded and aligned them in the shape of a card so that they don’t get messy and give a look of the card also we have styled the content which is defined as per the card size requirement. Let us code the JavaScript part to make it responsive on the user end.

Google Homepage Clone Using HTML and CSS

JavaScript Code for Flipping Cards

var flipCheck = 0;

function rotateCards() {
  if (flipCheck === 0) {
    document.getElementById("front-2").classList.add("showGreen");
    document.getElementById("back-2").classList.add("showRed");

    document.getElementById("front-1").classList.add("showGreen");
    document.getElementById("back-1").classList.add("showRed");

    flipCheck = 1;

    setTimeout(function () {
      document.getElementById("front-4").classList.add("showGreen");
      document.getElementById("back-4").classList.add("showRed");

      document.getElementById("front-3").classList.add("showGreen");
      document.getElementById("back-3").classList.add("showRed");

      document.getElementById("front-5").classList.add("showGreen");
      document.getElementById("back-5").classList.add("showRed");

      setTimeout(function () {
        document.getElementById("front-6").classList.add("showGreen");
        document.getElementById("back-6").classList.add("showRed");

        document.getElementById("front-7").classList.add("showGreen");
        document.getElementById("back-7").classList.add("showRed");
      }, 500);
    }, 500);
  } else {
    document.getElementById("front-2").classList.remove("showGreen");
    document.getElementById("back-2").classList.remove("showRed");

    document.getElementById("front-1").classList.remove("showGreen");
    document.getElementById("back-1").classList.remove("showRed");

    flipCheck = 0;

    setTimeout(function () {
      document.getElementById("front-3").classList.remove("showGreen");
      document.getElementById("back-3").classList.remove("showRed");

      document.getElementById("front-4").classList.remove("showGreen");
      document.getElementById("back-4").classList.remove("showRed");

      document.getElementById("front-5").classList.remove("showGreen");
      document.getElementById("back-5").classList.remove("showRed");

      setTimeout(function () {
        document.getElementById("front-7").classList.remove("showGreen");
        document.getElementById("back-7").classList.remove("showRed");

        document.getElementById("front-6").classList.remove("showGreen");
        document.getElementById("back-6").classList.remove("showRed");
      }, 500);
    }, 500);
  }
}

setInterval(rotateCards, 3000);

In this JavaScript code which the beginner level we have defined a function and document respectively and then we have set a time to flip it at 180 degrees after some seconds because the project name is a flipping card. Let us see the final output of the project.

Final Output Of Create a Flip Card With CSS

We have successfully created our Flipping Cards using HTML & CSS. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

In this article, We’ll show you How To Create a Flip Card With CSS with complete source code ready to implement with your project made with your own ideas.

If you find out this Blog helpful, then make sure to search codewithrandom on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Thank You And Happy Learning!!!

Written By – Harsh Sawant

Code By – @harshh9



Tags: , ,

Leave a Reply