CARD Flipping with JS

Using JavaScript and CSS let's create a CARD Flipping effect

Code

HTML

<div class="cardFlip">
  <div class="cardFlip-content">
    <div class="cardFlip-inside cardFlip-inside--front">
      <h2>Front</h2>
    </div>
    <div class="cardFlip-inside cardFlip-inside--back">
      <div class="cardFlip-back-content">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim,
          ipsa totam molestias fugiat quos adipisci. Fugiat eius praesentium
          numquam nihil repudiandae! Eligendi praesentium, eaque modi iusto
          minus earum voluptatibus porro!
        </p>
      </div>
    </div>
  </div>
</div>

The "cardFlip" class is used as the main container for the component.

Inside it, there is a "cardFlip-content" div that contains two inner divs: "cardFlip-inside cardFlip-inside--front" and "cardFlip-inside cardFlip-inside--back".

The first div is the front of the card and contains a "Front" header and the second div is the back of the card which contains a paragraph

The "cardFlip-back-content" class is used to style the card back content.

CSS

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap");

:root {
  --primary: #fc00ff;
  --secondary: #00dbde;
  --dark: #212121;
  --light: #f3f3f3;
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Oswald", montserrat, sans-serif;
  width: 100%;
  min-height: 100vh;
}

.cardFlip {
  margin: 100px auto 0;
  width: 400px;
  height: 600px;
  perspective: 1000px;
}

.cardFlip-content {
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
}

.cardFlip-content.is-flipped {
  transform: rotateY(180deg);
}

.cardFlip-inside {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.2);
}

.cardFlip-inside--front {
  background-image: linear-gradient(
    to bottom right,
    var(--primary),
    var(--secondary)
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.cardFlip-inside--front h2 {
  color: #fff;
  font-size: 32px;
}

.cardFlip-inside--back {
  background-color: var(--light);
  transform: rotateY(180deg);
}

.cardFlip-back-content {
  width: 100%;
  height: 100%;
  color: #fff;
  background-image: linear-gradient(
    to bottom right,
    var(--secondary),
    var(--primary)
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

p {
  margin: 50px;
}

The first line @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap"); imports the Oswald font from Google Fonts.

Next is a :root declaration that defines some color variables to be used throughout the code.

Then the code sets the style for all elements with *, removing margins and spacing.

Next, the body style is defined, specifying the Oswald font, minimum width and height of 100% and 100vh, respectively.

Next, the style for the flipcard component's main container is defined. It specifies a margin, width, height, perspective, and centered position.

The style for the flip card content is defined, specifying the width and height, transition, transform style, cursor and position. It also defines the "is-flipped" class to be used to animate card flipping.

The style for the inside parts of the card is defined, specifying the position, width and height, backface visibility, rounded edge and shadow.

Next, the style for the front and back of the card is defined, specifying the background, alignment, and justification.

Finally, the style for the paragraph on the back of the card is defined, specifying the margin.

JS

/**
 * Variable
 */
const card = document.querySelector(".cardFlip-content");

/**
 *
 * Function for flipping cards
 */
const flipped = () => card.classList.toggle("is-flipped");

card.addEventListener("click", flipped);

The first line const card = document.querySelector(".cardFlip-content"); selects the element with the HTML class "cardFlip-content" and assigns it to the constant card.

Next, a "flipped" function is created that toggles the "is-flipped" class of the selected element. The "is-flipped" class is used to animate card flipping in CSS.

Finally, the "click" event is added to the selected element and calls the "flipped" function when the element is clicked. This allows the card to be flipped when it is clicked and the "is-flipped" class is toggled, causing the flipping animation to trigger.

Demo

See below for the complete working project.

if you can't see it click here and see the final result

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊

Support Me

Youtube - WalterNascimentoBarroso
Github - WalterNascimentoBarroso
Codepen - WalterNascimentoBarroso