CODEWITHSUNDEEP
csscss-transitions
alexis
alexis

Reputation: 397

card flipping front flips in different direction opposite of whats declared in the css why?

I have a parent div with a class of .card and it has to children div, that rotates in opposite directions when their parent is hovered over to create a flipping card. If you hover over it and wait until the transition finishes it works fine, however if you hover over it then move the mouse of before the animation finishes the div with a class of .front rotates in the opposite direction, why and is there a way to fix this? In addition if you move the mouse on and off multiple times both children start turning at different times even though they have the same trigger- why?

https://jsfiddle.net/8pktgqpu/15/

  .card,.front,.back{
    width: 100px;
    height: 160px;
    margin: 1px;
  }
  .card{
    position: relative;
  }
  .front{
    background-color: red;
    transform: perspective(400px) rotatey(0deg); 
    backface-visibility: hidden;
    transition: transform 1s ease-in-out 0s;
  }
  .back{
    backface-visibility: hidden;
    transform: perspective(400px) rotatey(180deg); 
    background-color: blue;
    transition: transform 1s ease-in-out 0s;
    position: absolute;
    top: 0;
  }

  .card:hover .front{
    transform: rotatey(-180deg);
  }
  .card:hover .back{
    transform: rotatey(0deg);
  }

Upvotes: 1

Views: 318

Answers (2)

dennispreston
dennispreston

Reputation: 606

Try this...

.card-container {
  perspective: 1000px;
}

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

.card-container, .front, .back {
  width: 100px;
  height: 160px;
  margin: 1px;
}

.card {
  transition: 1s ease-in-out 0s;
  transform-style: preserve-3d;
  position: relative;
}

.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.front {
  z-index: 2;
  transform: rotateY(0deg);
  background-color: red;
}

.back {
  transform: rotateY(180deg);
  background-color: blue;
}
<div class="card-container">
	<div class="card">
		<div class="front">
			front
		</div>
		<div class="back">
			back
		</div>
	</div>
</div>

Upvotes: 1

LKG
LKG

Reputation: 4192

Add a div and use perspective and transform-style: preserve-3d; to get it below an example

        .flip {
            width: 300px;
            height: 500px;
            perspective: 1000px;
        }
        .flip_box {
            width: 300px;
            height: 500px;
            position: relative;
            transition: all 0.4s linear;
            -webkit-transition: all 0.4s linear;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d
        }
        .front, .back {
            position: absolute;
            width: 300px;
            height: 500px;
            top: 0px;
            left: 0px;
            border: 1px solid #666;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
        .front {
            color: red;
            font-size: 16px;
        }
        .back {
            color: blue;
            font-size: 18px;
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
        }
        .flip:hover .flip_box {
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
        }
<div class="flip">
    <div class="flip_box">
        <div class="front">
            Hello
        </div>
        <div class="back">
            Bye
        </div>
    </div>
</div>

Upvotes: 2

Related Questions