轉換旋轉和翻轉效果 - 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/