Question

我正在制作纸牌游戏并制作简单的翻转效果。我坚持使用CSS旋转。

此代码没有轮换效果很好：

        $(document).ready(function() {
        var card = $("#card");

        var width = card.width();
        var height = card.height();

        var left = card.offset().left;
        var top = card.offset().top;

        card.delay(500).animate({
            "width" : "0px",
            "height" : height+"px",
            "left" : "+="+(width / 2)+"px"
        }, 1000, function() {
            $(this).css('background-color', '#ff0000').animate({
                "width" : width+"px",
                "left" : "-="+(width / 2)+"px"
            }, 1000);
        });
    });

https://jsfiddle.net/Lo8egkra/1/

但如果我添加轮换：

        $(document).ready(function() {
        var card = $("#card");

        card.css({"transform": "rotate(90deg)"});

        var width = card.width();
        var height = card.height();

        var left = card.offset().left;
        var top = card.offset().top;

        card.delay(500).animate({
            "width" : "0px",
            "height" : height+"px",
            "left" : "+="+(width / 2)+"px"
        }, 1000, function() {
            $(this).css('background-color', '#ff0000').animate({
                "width" : width+"px",
                "left" : "-="+(width / 2)+"px"
            }, 1000);
        });
    });

https://jsfiddle.net/Lo8egkra/2/

你可以看到。它改变了它的位置，宽度和高度尺寸，并且翻转效果非常大。可能我做错了，但我已经尝试解决这个问题几个小时但没有成功。

Answer 1

我很难用javascript做这个，所以我建议使用CSS3更清晰的解决方案。

这是片段，CSS看起来有点长，但这是因为浏览器的所有前缀：

＆＃13;

$(document).ready(function() {

  $("button.rotate").click(function() {
    $("#card").css({
      "transform": "rotate(90deg)"
    });
    $("#card").toggleClass('flip');
    setTimeout(function() {
      $('#card').toggleClass('flip');
    }, 1000);

    $("button").hide();
  });

  $("#card").toggleClass('flip');
  setTimeout(function() {
    $('#card').toggleClass('flip');
  }, 1000);

});

＆＃13;

#card {
  position: relative;
  width: 300px;
  height: 200px;
}
#card .front {
  position: absolute;
  z-index: 999;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform-style: preserve-3d;
  -moz-backface-visibility: hidden;
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
}
#card.flip .front {
  z-index: 9;
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
}
#card .back {
  position: absolute;
  width: 300px;
  height: 200px;
  background: #ff0000;
  overflow: hidden;
  z-index: 999;
  -webkit-transform: rotateX(-180deg);
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-transform: rotateX(-180deg);
  -moz-transform-style: preserve-3d;
  -moz-backface-visibility: hidden;
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
}
#card.flip .back {
  z-index: 10;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="card">
  <div class="front">
    <img width="300" height="200" src="http://orig02.deviantart.net/4493/f/2009/309/5/a/joker_card_by_hojcat.jpg">
  </div>
  <div class="back"></div>
</div>
<br /><br />
<button class="rotate">Rotate</button>

＆＃13;

无论如何如果这不是适合你的解决方案，我希望它会让你知道还有其他方法可以翻转。

Answer 2

哦，我想我已经明白了。

$(document).ready(function() {
var card = $("#card");

card.css({"transform": "rotate(90deg)"});

var width = card.width();
var height = card.height();

var left = card.offset().left;

$({width : height}).delay(500).animate({width : 0}, {
  duration: 500,
  step: function (now) {
      card.css({"width" : now, "height" : width});
      card.css("left", left + (width / 2 - card.height() / 2));
  },
  complete: function() {
            card.css('background-color', '#ff0000');
      $({width : 0}).animate({width : height}, {
          duration: 500,
          step: function(now) {
              card.css({"width" : now, "height" : width});
              card.css("left", left + (width / 2 - card.height() / 2));
          }
      });
  }
  });
});

https://jsfiddle.net/Lo8egkra/3/

变换旋转和翻转效果 - CSS3和jQuery

2 个答案: