3D卡片翻转：CSS缩放，同时保持图像清晰度

Question

问题

我完全理解我无法拍摄缩小的图像，使用CSS进行缩放，并且不会让它看起来模糊。但我也知道我错了， 是一种做我想要的方法。

我希望达到我创造的这种确切效果，但不会失去第二张（翻转/背面）卡的清晰度。我觉得解决方案位于背面卡的初始宽度/高度和转换起源的某个地方，但我无法在那里得到它。我做错了什么？

小提琴

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 1

编辑V2：

这是另一个试图修复您在评论中指定内容的版本。

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：

诀窍是首先缩小卡片，然后在翻转时将比例尺应用到1。

<强> 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>