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

Transform rotate and flip effect - CSS3 and jQuery

本文关键字：CSS3 jQuery 旋转 翻转 变换      更新时间：2023-09-26

我正在制作一款纸牌游戏并制作一个简单的翻转效果。我坚持使用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/

你可以看到。它改变它的位置和宽度和高度大小，翻转效果是相当错误的。可能是我做错了什么，但我已经尝试了几个小时，没有成功。

我很难用javascript做到这一点，所以我建议用CSS3来解决这个问题。

这是一个代码片段，CSS看起来有点长，但这是因为浏览器的所有前缀:

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

无论如何，如果这不是适合你的解决方案，我希望它能给你一些知识，有其他的方法来做翻转

哦，我想我明白了。

$(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/

相关文章：