daveycroqet daveycroqet - 3 months ago 33
CSS Question

3D Card Flip: CSS scaling while maintaing image clarity

Problem



I fully understand that I cannot take a downsized image, scale it up with CSS, and not have it look blurry. But I also know I'm going about this wrong, and there is a way to do what I'm wanting.

I want to achieve this exact effect I've created, but without losing the clarity on the second (flipped / backside) card. I feel like the solution lies somewhere with the initial width/height of the backside card and transform origins, but I can't quite get it there. What am I doing wrong?

Fiddle



https://jsfiddle.net/a9dpc05t/1/

HTML



<div class="cardWrapper">
<div class="card">
<div class="cardFace front"><img src="http://www.gannon.tv/cp_assets/3dplayingcardflip/images/hearts.png" width="129"></div>
<div class="cardFace back"><img src="http://www.gannon.tv/cp_assets/3dplayingcardflip/images/spades.png" width="129"></div>
</div>
</div>


CSS



body {
background-color: black;
margin:50px 150px;
font-family:Arial, sans-serif;
}

.cardWrapper{
width:129px;
height:200px;
position:relative;
float:left;
cursor:pointer;
}

.cardFace{
position:absolute;
width:129px;
height:200px;
overflow:hidden;
}


JavaScript



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: 2.48,
ease: Back.easeOut
});
}
);

Answer

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>


V1:

The trick is to initially scale the card down, then just apply the scale to 1 on flip.


jsFiddle


CODE SNIPPET:

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: 144px;
  height: 220px;
  position: relative;
  float: left;
  cursor: pointer;
}
.cardFace {
  position: absolute;
  width: 432px;
  height: 660px;
  overflow: hidden;
}
.cardFace img {
  width: 432px;
}
.card {
  transform-origin: top right;
  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>