CODEWITHSUNDEEP
css3dcss-transitionscss-transforms
Ryan Hu
Ryan Hu

Reputation: 332

Flip a 3D card with CSS

I'm trying to make a 3D card flipping effect with CSS like this.

3D flipping card with CSS

The difference is that I want to use only CSS to implement it.

Here is the code I tried:

/*** LESS: ***/

    .card-container {
        position: relative;
        height: 12rem;
        width: 9rem;
        perspective: 30rem;
        .card {
            position: absolute;
            width: 100%;
            height: 100%;            
            div {
                position: absolute;
                height: 100%;
                width: 100%;
            }
            .front {
                background-color: #66ccff;
            }
            .back {
                background-color: #dd8800;
                backface-visibility: hidden;
                transition: transform 1s;
                &:hover {
                    transform: rotateY(180deg);
                }
            }
        }
    }
HTML:
<div class="card-container">
  <div class="card">
    <div class="front"><span>Front</span></div>
    <div class="back"><span>Back</span></div>
  </div>
</div>

The issue is that the card doesn't flip, it snaps from back to front like this:

Flipping card effect not working

Is it possible to implement this 3d card flip on hover effect using only CSS?

Upvotes: 6

Views: 8361

Answers (2)

web-tiki
web-tiki

Reputation: 103770

I simplified the code to make it shorter and make the 3d card flip on hover. The card flips on the Y axis from the front face to the back face this is what it looks like:

CSS 3D flipping card on hover

Here is an example of a simple CSS only flipping card the flip animation is launched on hover :

.card {
  position: relative;
  width: 50vh;
  height: 80vh;
  perspective: 500px;
  margin: 10vh auto 50vh;
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 1s;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.front {
  background-color: #66ccff;
}

.back {
  background-color: #dd8800;
  transform: rotateY(180deg);
}

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

.card:hover .back {
  transform: rotateY(360deg);
}
<div class="card">
  <div class="front"><span>Front</span></div>
  <div class="back"><span>Back</span></div>
</div>

This is what I changed in your code for the flip effect:

  • the front face wasn't rotated on th Y axis on hover
  • the hover effect was launched when the .back div was hovered. This can create flickering as that div is rotating and "disapears" at mid rotation. It's better to launch the animation when the static parent is hovered.
  • the first parent isn't really usefull so I removed it

Upvotes: 15

ashfaq ahmed
ashfaq ahmed

Reputation: 76

yes it can be done using CSS only and you can do by using CSS3 animation property. Here is example of flipping card animation.

<div class="container text-center">
  <div class="card-container">
  <div class="card">
    <div class="front">
      <span class="fa fa-user"></span>
    </div>
    <div class="back">User</div>
  </div>
</div>

The CSS

.card-container {
    display: inline-block;
    margin: 0 auto;
    padding: 0 12px;
    perspective: 900px;
    text-align: center;
}

.card {
  position: relative;
  width: 100px;
  height: 100px;
  transition: all 0.6s ease;
  transform-style: preserve-3d;
}

.front, .back {
  position: absolute;
  background: #FEC606;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  color: white;
  box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
  backface-visibility: hidden;
}

.front {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.back {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

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

.back {
  transform: rotateY(180deg);
}

You can also read this article about CSS Flip Animation on Hover

You can also find demo and download source from the article.

Upvotes: 1

Related Questions