Issue
I am aware that enlarging a small image using CSS will result in blurriness, but I believe there must be a way to achieve the effect I desire without sacrificing clarity. I suspect that adjusting the initial width/height and transform origins of the backside card may hold the solution, but I have not been successful in implementing it. Where am I going wrong?
Code Playground
https://jsfiddle.net/a9dpc05t/1/
Markup
<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>
Cascading Styles
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 Functions
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
});
}
);