Flip a 3D Card with CSS

Flip a 3D card with CSS

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 backface this is what it looks like:

3D flipping card on hover

This is what I changed for the filp 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

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

.card {
position: relative;
width: 9rem; height: 12rem;
perspective: 500px;
margin:5vh auto;
}
.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>

3d card flip effect with css not showing back

So the main problem is that preserve-3d isn't supported by IE. Huge bummer, but not much that can be done about it. Therefore, you should be applying the transform to each child element, not the entire card.

The best way I've found of making a card flip is as follows:

  • Transform each face. The front should default to 0, the back to 180. When flipped, they should be 180 and 360 respectively.
  • Apply a z-index to them. The visible face should have something like 10, while the hidden one has 0. This ensures that the right one is in front at all times (even in browsers that don't support transformations)

Here is my update to your Fiddle showing a working card flip.

3D Card Flip: CSS scaling while maintaing image clarity

EDIT V2:

Here's another version trying to fix what you specified in the comment.

jsFiddle Version 2


CODE SNIPPET V2:

TweenLite.set(".cardWrapper", {  perspective: 800});TweenLite.set(".card", {  transformStyle: "preserve-3d"});TweenLite.set(".back", {  rotationY: -180});TweenLite.set([".back", ".front"], {  backfaceVisibility: "hidden"});
$(".cardWrapper").click( function() { TweenLite.to($(this).find(".card"), 1.2, { rotationY: 180, scale: 1, ease: Back.easeOut }); });
body {  background-color: black;  margin: 120px;  font-family: Arial, sans-serif;}.cardWrapper {  width: 387px;  height: 600px;  position: relative;  float: left;  cursor: pointer;}.cardFace {  position: absolute;  width: 387px;  height: auto;  overflow: hidden;}.cardFace img {  width: 387px;}.card {  transform: scale(0.248);}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<div class="cardWrapper"> <div class="card"> <div class="cardFace front"> <img src="http://www.gannon.tv/cp_assets/3dplayingcardflip/images/hearts.png"> </div> <div class="cardFace back"> <img src="http://www.gannon.tv/cp_assets/3dplayingcardflip/images/spades.png"> </div> </div></div>
<div class="cardWrapper"> <div class="card"> <div class="cardFace front"> <img src="http://www.gannon.tv/cp_assets/3dplayingcardflip/images/hearts.png"> </div> <div class="cardFace back"> <img src="http://www.gannon.tv/cp_assets/3dplayingcardflip/images/spades.png"> </div> </div></div>

Flip-Card CSS/HTML: The back of the card is not showing when flipped

The order of the nested div tags is important with the css rules:

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #bbb;
color: black;
}

/* Style the back side */
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img class="img-fluid" src="<?= $pathStart ?>static/images/Dad3x4.png" alt="dad-owner">
<h4 class="card-title">Kyle Field</h4>
<p class="card-text">Owner</p>
</div>
<div class="flip-card-back">
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non
commodi
vel
eius veniam maxime?
</p>
</div>
</div>
</div>


<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img class="img-fluid" src="<?= $pathStart ?>static/images/Dad3x4.png" alt="dad-owner">
<h4 class="card-title">Kyle Field</h4>
<p class="card-text">Owner</p>
</div>
<div class="flip-card-back">
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non
commodi
vel
eius veniam maxime?
</p>
</div>
</div>
</div>

css card flip effect, does not flip back

you need to add the transition and transform-style property on flipbox and not flipbox:hover.

.flip-box{transition: 0.6s;
position: relative;
transform-style: preserve-3d;
}

.flip-box:hover {
transform: rotateY(180deg);
}

try changing the last few lines to this and it'll work.
Updated JSfiddle: https://jsfiddle.net/pq4juLqz/5/

CSS: Determine height of flip card in grid automatically without js

Don't use position:absolute to achieve this. Rely on CSS grid and make both the front and the back of the card on the same area so they overlap while still being in flow element so the area will be defined with the biggest height:

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}

.flip-card {
overflow: hidden;
perspective: 1000px;
}

.flip-card-inner {
display: grid; /* here */
transition: transform 0.6s;
transform-style: preserve-3d;
}

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

.flip-card-front,
.flip-card-back {
grid-area: 1/1; /*and here */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.flip-card-back {
background-color: red;
transform: rotateY(180deg);
}

img {
max-width: 100%
}
<div class="grid-container">

<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Wikipedia_Logo_1.0.png">
</div>
<div class="flip-card-back">
<p>
Some Text
</p>
</div>
</div>
</div>

<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Wikipedia_Logo_1.0.png">
</div>
<div class="flip-card-back">
<p>
Some Text
</p>
</div>
</div>
</div>

</div>


Related Topics



Leave a reply



Submit