问题
我完全理解,我无法将缩小的图片用 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
});
}
);
最佳答案
编辑 V2:
这是另一个版本,试图修复您在评论中指定的内容。
代码片段 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。
代码片段:
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>
关于javascript - 3D卡片翻转: CSS scaling while maintaing image clarity,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38937800/