我正在创造一个孤独的游戏。到目前为止，我已经完成了大部分工作，但卡片翻转动画在a **中很痛苦。
请参阅this fiddle（由于整个游戏代码都在其中，因此可能有点慢）
当您拖放卡片时，卡片背面会被正面替换。这是在代码的这一部分完成的：
upturn: function () {
with(this) {
if (is_downturned()) {
element.children('.downturned')
.removeClass('downturned').addClass(_SUITS[_suit()].color)
.append('<img height="80px" width="50px" border="0" src="http://mauricederegt.com/test/solitaire/cards/' + _RANKS[_rank()] + '' + _SUITS[_suit()].symbol + '.jpg">') //NEW
element.addClass(_scope());
if (element.hasClass('ui-draggable-disabled')) {
element.draggable('enable');
} else {
element.draggable({
containment: '#field',
revert: 'invalid',
revertDuration: 200,
zIndex: 99
});
}
if (!element.hasClass('ui-droppable-disabled')) {
element.droppable($.extend(DROPPABLE_OPTIONS, {
accept: _tableau_pile_scope()
}));
}
}
}
}
基本上它会删除卡片的背面（.removeClass('downturned')）并添加一个新类（.addClass(_SUITS[_suit()].color)），其中suits是哈特，三叶草等，color是黑色或红色。
现在当这个动作发生时，我想添加一个漂亮的翻转动画。
我在网上玩了一些教程，但是没有给我一个有用的解决方案（主要是卡片开始变得怪异或游戏停止工作）。
我能得到的最接近的是：
-webkit-perspective: 600px;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(180deg);
/* -- transition is the magic sauce for animation -- */
-webkit-transition: 0.6s;
在班级的CSS中：
.red,
.black {
cursor: pointer;
<<<code added here>>>
}
那么如何添加漂亮的卡片翻转动画呢？希望有人可以帮助我。
编辑：
通过在JS部分中将this.element.addClass('container').append('<div class="downturned">');更改为this.element.addClass('container').append('<div class="downturned">').append('<div class="hiddencardfront">');，我可以创建一个额外的空div，（我认为我需要用于卡片翻转动画），但我仍然可以＆＃t; t让它发挥作用
答案 0 :(得分：3)
我想有几种方法可以做到这一点。但我想我建议只用一个元素做旧的方法。基本上因为它是一个2D对象，所以前面和后面永远不会同时显示，并且卡片将会“消失”。所以我们可以把动画分成两部分。 “隐藏”卡片（这里我们可以将宽度设置为零）。将图像更改为另一张卡，然后再次“显示”该卡（再次从零动画到原始宽度）。所以，如果我们使用jQuery，使用html
<img class="card" src="http://mauricederegt.com/test/solitaire/cards/back.jpg" />
jQuery看起来像：
var CARDWIDTH = 50;
function turnCompatible(elem, src) {
$(elem).animate({
width: 0, //animate to zero
marginLeft: CARDWIDTH / 2,
marginRight: CARDWIDTH / 2
}, function () {
this.src = src //change the image
$(this).animate({
width: CARDWIDTH, //show the image again
marginLeft: 0,
marginRight: 0,
})
})
}
$(".card").click(function(){
turnCompatible(this, src)
})
这或多或少会起作用。尽管可以通过CSS变换和动画更好地改进动画，但是该解决方案将与不支持CSS变换的浏览器兼容（主要是IE.IE＆lt; 10）。有了这个，你可以做点像
function turnCSS(elem, src) {
$(elem)
.addClass("flipping")
.bind("transitionend webkittransitionend", function () { //should add more prefixes
this.src = src;
$(this)
.unbind("transitionend webkittransitionend")
.removeClass("flipping")
})
}
使用以下CSS
.card {
width:50px;
height:80px;
-webkit-transition:-webkit-transform 0.5s;
transition:transform 0.5s;
background:#FF0;
}
.flipping {
transform: translate(0, 20px) rotateY(90deg);
-webkit-transform: translate(0, 20px) rotateY(90deg);
}
所以也许看起来不是你想要的东西，但只用一个元素就可以做翻转动画。
答案 1 :(得分：1)
我认为我遇到的一个大问题是，当这是构建时，没有考虑翻转动画。因此只有1个Div，需要更多才能使其工作。此外，使用的拖放代码是旧的，并且会中断动画代码。
我想唯一的解决方案是从头开始，这次考虑动画。
非常感谢帮助和解决方案，但重新开始是我想要的方式
问候
答案 2 :(得分：0)
我在这里做了一个简单的“可翻转”3D商务卡演示作为一个侧面项目，几年前使用CSS / HTML / jQuery：
http://drewpeifer.com/demo/3d-card/index.html
随意检查（或分叉）github上的代码：https://github.com/Drewpeifer/3d-card-demo
README解释了大部分内容，但它基于CSS动画和转换，并通过transit.js（免费库）提供了一些跨浏览器帮助。我基本上创建了一个“卡”div，它包含两个子div，卡的正面和背面。然后我使用CSS变换将父div重新“折叠”回来，然后旋转父div以显示任何一方。
这可能会对您的方案有所帮助，也可能不会，这取决于您要包含的HTML结构和JS库。只是觉得它可能会给你一些好主意。祝你好运！
答案 3 :(得分：0)
试试这个
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst1 {
from {
-webkit-transform : rotateY(180deg);
-moz-transform : rotateY(180deg);
-ms-transform : rotateY(180deg);
transform: rotateY(180deg);}
to {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
}
@-webkit-keyframes myfirst2 {
from {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
to {
-webkit-transform : rotateY(0deg);
-moz-transform : rotateY(0deg);
-ms-transform : rotateY(0deg);
transform: rotateY(0deg);}
}
/* Standard syntax */
@keyframes myfirst1 {
from {
-webkit-transform : rotateY(180deg);
-moz-transform : rotateY(180deg);
-ms-transform : rotateY(180deg);
transform: rotateY(180deg);}
to {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
}
@keyframes myfirst2 {
from {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
to {
-webkit-transform : rotateY(0deg);
-moz-transform : rotateY(0deg);
-ms-transform : rotateY(0deg);
transform: rotateY(0deg);}
}
@-webkit-keyframes mylast1 {
from {
-webkit-transform : rotateY(0deg);
-moz-transform : rotateY(0deg);
-ms-transform : rotateY(0deg);
transform: rotateY(0deg);}
to {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
}
@-webkit-keyframes mylast2 {
from {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
to {
-webkit-transform : rotateY(180deg);
-moz-transform : rotateY(180deg);
-ms-transform : rotateY(180deg);
transform: rotateY(180deg);}
}
@keyframes mylast1 {
from {
-webkit-transform : rotateY(0deg);
-moz-transform : rotateY(0deg);
-ms-transform : rotateY(0deg);
transform: rotateY(0deg);}
to {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
}
@keyframes mylast2 {
from {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
to {
-webkit-transform : rotateY(180deg);
-moz-transform : rotateY(180deg);
-ms-transform : rotateY(180deg);
transform: rotateY(180deg);}
}
</style>
<script>
$(document).ready(function()
{
$("#btn2").hide();
$("#btn1").click(function(){
$("#btn1").hide();
$("#box1").css({ 'z-index':'2',
'-webkit-animation': 'myfirst1 5s',
'animation': 'myfirst1 5s'
});
$("#box2").css({ 'z-index':'0' ,
'-webkit-animation': 'mylast1 5s',
'animation': 'mylast1 5s'
});
setTimeout(function(){
$("#box1").css({ 'z-index':'0',
'-webkit-animation': 'myfirst2 5s',
'animation': 'myfirst2 5s'
});
$("#box2").css({ 'z-index':'2' ,
'-webkit-animation': 'mylast2 5s',
'animation': 'mylast2 5s'
});
}, 5000);
setTimeout(function(){$("#btn2").show();}, 10000);
});
$("#btn2").click(function(){
$("#btn2").hide();
$("#box2").css({ 'z-index':'2',
'-webkit-animation': 'myfirst1 5s',
'animation': 'myfirst1 5s'
});
$("#box1").css({ 'z-index':'0',
'-webkit-animation': 'mylast1 5s',
'animation': 'mylast1 5s'
});
setTimeout(function(){
$("#box2").css({ 'z-index':'0',
'-webkit-animation': 'myfirst2 5s',
'animation': 'myfirst2 5s'
});
$("#box1").css({ 'z-index':'2',
'-webkit-animation': 'mylast2 5s',
'animation': 'mylast2 5s'
});
}, 5000);
setTimeout(function(){$("#btn1").show()}, 10000);
});
});
</script>
</head>
<body>
<button id="btn1">flip</button>
<button id="btn2">Reset</button>
<div id="box1" style="position:fixed;background:#98bf21;height:100px;width:100px;margin:6px;">
</div><div id="box2" style="position:fixed;background:#bf2198;height:100px;width:100px;margin:6px;">
</div>
</body>
</html>
在这个我刚刚动画两个div背靠背（你可以用必要的图像替换它，设置位置并将功能放到功能中以减少代码。我已经专门为你做了这个。所以我没有优化它因此，我要求您自定义以满足您的要求。
答案 4 :(得分：0)
关于CSS 3d变换的三个问题。
对于第1点和第1点2补充：
-webkit-backface-visibility:hidden; /* Chrome, Safari, Opera */
backface-visibility:hidden;
使用元素中心：
transform-origin:50% 50%;
-ms-transform-origin:50% 50%; /* IE 9 */
-webkit-transform-origin:50% 50%; /* Chrome, Safari, Opera */