javascript - 3D卡片翻转: CSS scaling while maintaing image clarity

Question

问题

我完全理解，我无法将缩小的图片用 CSS 放大，但它看起来并不模糊。但我也知道我这样做是错误的，而且有一种方法可以做我想做的事。

我想实现我创建的这个效果，但又不失去第二张(翻转/背面)卡片的清晰度。我觉得解决方案位于背面卡的初始宽度/高度和变换原点的某个地方，但我不太明白。我做错了什么？

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 1

编辑 V2:

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

jsFiddle Version 2

---

代码片段 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

---

代码片段:

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>