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

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看起来有点长，但它是因为浏览器的所有前缀：

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

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

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/