CODEWITHSUNDEEP
csscss-transitionscss-transforms
alexis
alexis

Reputation: 397

How can I fix this css card flip transition?

I'm trying to create two divs, in a parent, with one div with a class of front and the other with a class of back. I'm trying to flip the back one and place it under the front one, so when I flip its parent the back one shows and when its flipped again back the front one shows, creating a 3 dimensional card that flips when hovered. However anywhere the back overlaps with the front,the front is only visible no matter if its viewed from the front or the back. I have tried using backface-visibility: hidden on both, which from my understanding should make the back of the div not visible when flipped, but this results in the back completely disappearing and it having no effect on the front. I know this is possible because I have seen someone do this, but what am I doing wrong here and how can I fix these issues?

https://fiddle.jshell.net/h8vz85b3/2/

<!DOCTYPE html>
<html>
    <head>
        <title> media test</title>
        <meta charset="utf-8">
        <meta name="keywords" content="test,css, css test">
        <meta name="description" content="A CSS test and review.">
        <meta name="author" content="brandon lind">
        <link rel="stylesheet" media="screen" href="css/main.css">
        <style>
            .parent{
                transition: transform 1s ease-in-out 0s;
                width: 100px;
            }
            .parent:hover {
                transform: rotateY(180deg);
            }
            .back,.front{
                width: 100px;
                height: 170px;
                //backface-visibility: hidden;

            }
            .front{
                background-color: blue;
                transform: translate(0, -150px);
            }
            .back{
                background-color: red;
                transform: rotateY(190deg);          
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="back">
                back
            </div>
            <div class="front">
                front
            </div>
        </div>
    </body>
</html>

Upvotes: 1

Views: 1927

Answers (1)

cjl750
cjl750

Reputation: 4629

Edit: Simplified the code a bit.

You can solve the problem of the front side always showing on top by including transform-style: preserve-3d. You'll also definitely want to include backface-visibility: hidden, as was your instinct.

Also, you'll have an easier time positioning the card faces on top of each other if you use absolute positioning instead of translations, so I've made that change for you.

The sample below is working for me just fine without declaring a z-index, but if you run into problems with the back showing initially instead of the front, you can simply give the front div a higher z-index than the back div.

.parent {
  transition: transform 1s ease-in-out 0s;
  transform-style: preserve-3d;
  width: 100px;
}
.parent:hover {
  transform: rotateY(180deg);
}
.back,
.front {
  width: 100px;
  height: 170px;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
}
.front {
  background-color: blue;
}
.back {
  background-color: red;
  transform: rotateY(180deg);
}
<div class="parent">
  <div class="back">
    back
  </div>
  <div class="front">
    front
  </div>
</div>

Upvotes: 1

Related Questions