変形回転とフリップエフェクト - 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/