Skip to main content

3D Flip Cards with Hover Animations

image-3d-flip-on-hover

3D Flip Cards with Hover Animations

Creating engaging and interactive components on your website is essential for captivating user attention. One such design element is a flipping card effect—a popular 3D animation that reveals content on the back of a card when hovered or clicked. This effect, achieved with just HTML and CSS, is perfect for showcasing information, portfolios, or even creating fun, interactive games.

In this tutorial, we’ll explore how to build a flipping card layout using HTML and CSS. You’ll learn how to structure your HTML to define the front and back of the cards and use CSS to apply 3D transformations that create the flipping effect. By the end, you’ll be able to incorporate this sleek, professional-looking feature into your projects with ease.


Table Of Contents

Read Also:

HTML:

Let's begin with the foundational structure of an HTML document, as depicted below.

<!DOCTYPE html>
<html>
 <head>
   <title>3D Flip Cards with Hover Animations Using Html Css Only</title>
 </head>
 <body>
	// Content
 </body>
</html>


Now that we have established the basic HTML structure and ensured that all necessary dependencies are included in the HTML document, it is time to proceed with writing the HTML code, which is provided below. 

<!DOCTYPE html>
<html>
 <head>
   <title>3D Flip Cards with Hover Animations Using Html Css Only</title>
 </head>
 <body>
<div class="cards">
  <div class="card">
    <div class="card-inner">
      <div class="card-front">Front</div>
      <div class="card-back">Back</div>
    </div>
  </div>
  <div class="card">
    <div class="card-inner">
      <div class="card-front">Front</div>
      <div class="card-back">Back</div>
    </div>
  </div>
  <div class="card">
    <div class="card-inner">
      <div class="card-front">Front</div>
      <div class="card-back">Back</div>
    </div>
  </div>
</div>
</body>
</html>
  • <div class="cards">: This is the container for all the cards. It holds multiple cards, making it easy to create a grid or list of flipping cards.
  • <div class="card">: Each card is an individual flipping unit. Multiple cards are nested inside the container.
  • <div class="card-inner">: This wrapper allows for the flipping animation. It rotates on the Y-axis to reveal either the front or back face.
  • <div class="card-front"> and <div class="card-back">: These represent the two sides of the card. The front is the default view, while the back is revealed during the flip.

CSS:

Base Styling

  body {
      font-family: 'Poppins', sans-serif;
  }
  • Sets the default font for the webpage to Poppins, a clean and modern sans-serif font, ensuring consistent typography.

Card Layout

  .cards {
      display: flex;
      justify-content: center;
      gap: 2em;
      flex-wrap: wrap;
      cursor: pointer;
  }
  • display: flex: Aligns the cards horizontally within the container.
  • justify-content: center: Centers the cards in the container.
  • gap: 2em: Adds space between the cards.
  • flex-wrap: wrap: Ensures the cards wrap to the next line if the container is too small.
  • cursor: pointer: Changes the cursor to a pointer, indicating interactivity.

3D Card Setup

  .card {
      width: 200px;
      height: 300px;
      perspective: 1000px;
  }
  • width and height: Defines the card's dimensions.
  • perspective: 1000px: Adds a 3D perspective, giving depth to the flip effect.

Card Inner Wrapper

  .card-inner {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: transform 0.8s ease;
      position: relative;
  }
  • transform-style: preserve-3d: Ensures child elements are rendered in 3D space.
  • transition: transform 0.8s ease: Smoothly transitions the rotation when the card is hovered.
  • position: relative: Positions the card layers relative to the .card-inner.

Hover Effect for Flip

  .card:hover .card-inner {
      transform: rotateY(180deg);
  }
  • Rotates the .card-inner on the Y-axis when the card is hovered, revealing the back face.

Card Faces Styling

  .card-front, .card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Poppins', sans-serif;
      font-size: 1.2rem;
      font-weight: 600;
      border-radius: 10px;
      box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
      transition: background 0.3s ease;
  }
  • position: absolute: Stacks the front and back faces of the card.
  • backface-visibility: hidden: Hides the opposite side of the card during rotation.
  • display: flex: Centers the content inside each card face.
  • border-radius: 10px: Adds rounded corners for a polished look.
  • box-shadow: Creates a subtle shadow for depth.
  • transition: background 0.3s ease: Smoothly changes the background color on hover.

Front and Back Face Customizations

  .card-front {
      background: linear-gradient(135deg, #ff7e5f, #feb47b);
      color: white;
  }
  .card-back {
      background: linear-gradient(135deg, #6a11cb, #2575fc);
      transform: rotateY(180deg);
      color: white;
  }
  • Front Face:
    • background: linear-gradient: Applies a warm peach gradient.
    • color: white: Sets text color to white.
  • Back Face:
    • transform: rotateY(180deg): Rotates the back face by 180 degrees to align it with the flip animation.
    • background: linear-gradient: Uses a purple-to-blue gradient.

Hover Effects for Gradients

  .card:hover .card-front {
      background: linear-gradient(135deg, #ff4081, #ff80ab);
  }
  .card:hover .card-back {
      background: linear-gradient(135deg, #8e2de2, #4a00e0);
  }
  • Adds vibrant gradient transitions to both the front and back faces when hovered, enhancing the visual appeal.

Css Complete Code:

.cards {
    display: flex;
    justify-content: center;
    gap: 2em;
    flex-wrap: wrap;
    cursor: pointer;
}

.card {
    width: 200px;
    height: 300px;
    perspective: 1000px;
}

.card-inner {
    font-family: "Poppins", sans-serif;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s ease;
    position: relative;
}

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

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
    transition: background 0.3s ease;
    font-family: "Poppins", sans-serif;
}

/* Front face with a gradient */
.card-front {
    background: linear-gradient(135deg, #ff7e5f, #feb47b); /* Warm peachy gradient */
    color: white;
}

/* Back face with a vibrant contrasting color */
.card-back {
    background: linear-gradient(135deg, #6a11cb, #2575fc); /* Purple to blue gradient */
    transform: rotateY(180deg);
    color: white;
}

/* Hover effect to add depth */
.card:hover .card-front {
    background: linear-gradient(135deg, #ff4081, #ff80ab); /* Pink gradient */
}

.card:hover .card-back {
    background: linear-gradient(135deg, #8e2de2, #4a00e0); /* Deep purple to violet */
}

Read Also:

Output:

Card-3d-flip-on-hover

Read Also:


Comments

Post a Comment