Question

我正在玩this card game，我想添加一张卡片翻转动画。

我已经google了一个答案，但大多数解决方案都是指jquery（我不想只为1个动画实现）或CSS3（I liked this example）。那里运气不太好。

js游戏使用以下内容（来自cardgamecore.js）：

playingCard.redrawCardImage()强制卡片重绘

playingCard.showFace(bool: face)将卡片设置为面朝上或面朝下，并在需要时重新绘制。 true =面朝上，假=面朝下。

playingCard.prototype.redrawCardImage = function () {
    // Set or change the image showing on the card face
    if( !this.faceImage || !this.cardSet.backImage ) { return; }
    // Bug in Firefox - alt attributes do not change unless they are made _before_ an SRC change
    this.cardImage.setAttribute('alt',this.wayup?(this.cardSet.cardNames[this.number-1]+' '+this.suit):this.cardSet.cardWord);
    this.cardImage.src = this.wayup ? this.faceImage : this.cardSet.backImage;
};

playingCard.prototype.showFace = function (oWhich) {
    // Used to flip a card over
    if( this.redrawNewImage != oWhich ) {
        this.wayup = oWhich;
        this.redrawCardImage();
    }
};

因此，当卡片显示其背面时playingCard.showFace = false。单击它时，playingCard.showFace = true并重新绘制图像。此时卡应该有一个很好的翻转动画。

但是怎么做？

Answer 1

你想谷歌搜索的是“css 3翻转动画”

http://davidwalsh.name/demo/css-flip.php

Answer 2

我也在做纸牌游戏......

首先你可以写这样的卡片：

<div class='card' >
   <div class='faces'>
       <div class='face front'> Hello</div>
       <div class='face back'>Goodbye</div>
   </div>
</div>

在你的html中会考虑这两个面，但css只显示一个：

.card {
  -webkit-perspective: 800;
   width: 50%;
   height: 300px;
   position: relative;
   margin: 3px;
   float:left; /*if you want more than one card in a line*/

}
.card .faces.flipped {
  -webkit-transform: rotatey(-180deg); /* this style will help the card to rotate */
}
.card .faces {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d; /* This is a 3d transformation */
  -webkit-transition: 0.5s;/*the animation last 0.5secs*/
}
.card .faces .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden ; /*hides the back of the card until transform*/
  z-index: 2;
    font-family: Georgia;
    font-size: 3em;
    text-align: center;
    line-height: 200px;
}
.card .faces .front {
  position: absolute;
  z-index: 1;
    background: black;
    color: white;
    cursor: pointer;
}
.card .faces .back {
  -webkit-transform: rotatey(-180deg); /*allows the flip to the back of the card*/
  background-image: url("image.jpg"); /*background image for the back if you want*/
  background-size:100%;
  color:white;
  border:1px solid black;
}

唯一要做的就是添加＆＃39;翻转＆＃39;类。所以也许不是重绘。

   $(".card").on('click',function(){
      $(this).children('.faces').toggleClass('flipped');
  });

这里是FIDDLE

Answer 3

与脚本的作者联系，他告诉我，如果不重写大部分代码，目前的脚本是不可能的。所以这个问题可以关闭。非常感谢您试图帮助我。

在这张JS卡游戏中添加卡片翻转动画？

3 个答案: