Javascript 如何添加简单的卡片翻转动画？_Javascript_Jquery_Css_Css Transitions_Css Transforms

Javascript 如何添加简单的卡片翻转动画？

javascript jquery css

Javascript 如何添加简单的卡片翻转动画？,javascript,jquery,css,css-transitions,css-transforms,Javascript,Jquery,Css,Css Transitions,Css Transforms,我正在创造一个孤独的游戏。到目前为止，我已经完成了大部分工作，但是卡片翻转动画是一件让人头疼的事情看（可能有点慢，因为整个游戏代码都在里面）拖放卡时，卡的背面将替换为正面。这是在本部分代码中完成的： upturn: function () { with(this) { if (is_downturned()) { element.children('.downturned')

我正在创造一个孤独的游戏。到目前为止，我已经完成了大部分工作，但是卡片翻转动画是一件让人头疼的事情

看（可能有点慢，因为整个游戏代码都在里面）

拖放卡时，卡的背面将替换为正面。这是在本部分代码中完成的：

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()
                        }));
                    }
                }
            }
        }

在类中的CSS中：

.red,
.black {
  cursor: pointer;
  <<<code added here>>>
}

.red，
布莱克先生{
光标：指针；
<此处添加的代码>
}

然而，这导致了一些奇怪的动作（尽管卡片正在翻转）：

卡片翻转，但图像/正面已显示后

所有卡片都是镜像的

卡的拖动/手柄区域太远了

那么我如何才能添加一个漂亮的翻牌动画呢？希望有人能帮我

编辑：

通过更改

this.element.addClass（'container'）.append（''）

this.element.addClass（'container'）.append（“”）.append（“”）

在JS部分，我可以创建一个额外的空div（我想我需要它来制作卡片翻转动画），但我仍然无法使它工作

几年前，我使用CSS/HTML/jQuery在这里做了一个简单的“翻转”3D名片演示，作为一个附带项目：

可以在github上随意查看（或分叉）代码：

自述文件解释了其中的大部分内容，但它基于CSS动画和转换，并提供了transit.js（免费库）的跨浏览器帮助。我基本上创建了一个“card”div，它包含两个子div，卡的正面和背面。然后，我使用CSS转换将父div“折叠”回自身，然后旋转该父div以显示任意一侧

这可能对您的场景有帮助，也可能没有，这取决于您的HTML结构和要包含的JS库。我只是觉得这会给你一些好主意。祝你好运

试试这个

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

/*铬、狩猎、歌剧*/ @-webkit关键帧myfirst1{ 从{ -webkit变换：旋转（180度）； -莫兹变换：旋转（180度）； -ms变换：旋转（180度）；变换：旋转（180度）；} 到{ -webkit变换：旋转（90度）； -莫兹变换：旋转（90度）； -ms变换：旋转（90度）；变换：旋转（90度）；} } @-webkit关键帧myfirst2{ 从{ -webkit变换：旋转（90度）； -莫兹变换：旋转（90度）； -ms变换：旋转（90度）；变换：旋转（90度）；} 到{ -webkit变换：旋转（0度）； -moz变换：旋转（0度）； -ms变换：旋转（0度）；变换：旋转（0度）；} } /*标准语法*/ @关键帧myfirst1{ 从{ -webkit变换：旋转（180度）； -莫兹变换：旋转（180度）； -ms变换：旋转（180度）；变换：旋转（180度）；} 到{ -webkit变换：旋转（90度）； -莫兹变换：旋转（90度）； -ms变换：旋转（90度）；变换：旋转（90度）；} } @关键帧myfirst2{ 从{ -webkit变换：旋转（90度）； -莫兹变换：旋转（90度）； -ms变换：旋转（90度）；变换：旋转（90度）；} 到{ -webkit变换：旋转（0度）； -moz变换：旋转（0度）； -ms变换：旋转（0度）；变换：旋转（0度）；} } @-webkit关键帧mylast1{ 从{ -webkit变换：旋转（0度）； -moz变换：旋转（0度）； -ms变换：旋转（0度）；变换：旋转（0度）；} 到{ -webkit变换：旋转（90度）； -莫兹变换：旋转（90度）； -ms变换：旋转（90度）；变换：旋转（90度）；} } @-webkit关键帧mylast2{ 从{ -webkit变换：旋转（90度）； -莫兹变换：旋转（90度）； -ms变换：旋转（90度）；变换：旋转（90度）；} 到{ -webkit变换：旋转（180度）； -莫兹变换：旋转（180度）； -ms变换：旋转（180度）；变换：旋转（180度）；} } @关键帧mylast1{ 从{ -webkit变换：旋转（0度）； -moz变换：旋转（0度）； -ms变换：旋转（0度）；变换：旋转（0度）；} 到{ -webkit变换：旋转（90度）； -莫兹变换：旋转（90度）； -ms变换：旋转（90度）；变换：rotateY（90度）；} } @关键帧mylast2{ 从{ -webkit变换：旋转（90度）； -莫兹变换：旋转（90度）； -ms变换：旋转（90度）；变换：旋转（90度）；} 到{ -webkit变换：旋转（180度）； -莫兹变换：旋转（180度）； -ms变换：旋转（180度）；变换：旋转（180度）；} } $（文档）.ready（函数（） { $（“#btn2”）.hide（）； $（“#btn1”）。单击（函数（）{ $（“#btn1”）.hide（）； $（“#box1”）.css（{'z-index'：'2'， “-webkit动画”：“myfirst1 5s”， “动画”：“myfirst1 5s” }); $（“#box2”）.css（{'z-index'：'0'， “-webkit动画”：“mylast1 5s”， “动画”：“mylast1 5s” }); setTimeout（函数（）{ $（“#box1”）.css（{'z-index'：'0'， “-webkit动画”：“myfirst2 5s”， “动画”：“myfirst2 5s” }); $（“#box2”）.css（{'z-index'：'2'， “-webkit动画”：“mylast2 5s”， “动画”：“mylast2 5s” }); }, 5000); setTimeout（函数（）{$（“#btn2”）.show（）；}，10000）； }); $（“#btn2”）。单击（函数（）{ $（“#btn2”）.hide（）； $（“#box2”）.css（{'z-index'：'2'， “-webkit动画”：“myfirst1 5s”， “动画”：“myfirst1 5s” }); $（“#box1”）.css（{'z-index'：'0'， “-webkit动画”：“mylast1 5s”， “动画”：“mylast1 5s” }); setTimeout（函数（）{ $（“#box2”）.css（{'z-index'：'0'， “-webkit动画”：“myfirst2 5s”， “动画”：“myfir” <!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> -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 */ <img class="card" src="http://mauricederegt.com/test/solitaire/cards/back.jpg" /> 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) }) function turnCSS(elem, src) { $(elem) .addClass("flipping") .bind("transitionend webkittransitionend", function () { //should add more prefixes this.src = src; $(this) .unbind("transitionend webkittransitionend") .removeClass("flipping") }) } .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); }