Javascript 为什么有时有些卡片不'；你根本不旋转吗？

例如：

卡牌至少可以旋转180度，在CSS和JS中设置，但在多次运行时，其中一些卡根本不会旋转。谁能解释一下原因吗

<div class="flip-container">
    <div class="flipper">
        <div class="front"></div>
        <div class="back">?</div>
    </div>
</div>
...

<button onclick="rotate();">Rotate</button>
<style>
.flip-container {
    perspective: 1000px;float:left;
}
.flip-container, .front, .back {
    width: 160px;height: 220px;
}
.flipper {
    transform-style:preserve-3d;position: relative;
}
.front, .back {
    backface-visibility: hidden;position: absolute; top: 0; left: 0;    
}
.front {
    z-index: 2; transform: rotateY(0deg);background-color: blue;
}
.back {
    transform: rotateY(180deg); background-color: grey;font-size: 13em; text-align: center; vertical-align: middle;
}
</style>
<script>
function rnd(){
    var randNum = Math.floor((Math.random() * 20) + 1);
    if(randNum %2 == 0){//generated number is even
       randNum  = randNum +1 ;       
    }
    return randNum;
}
function rotate(){
    $('.flipper').each(function(i, obj) {
        var rn = rnd();
        var nn = 180 * rn;
        var sp = 0.2 * rn;
        console.log(rn);
        $(this).css("transition", sp+"s").css("transform", "rotateY("+nn+"deg)");
    });
}
</script>

?
...
旋转
.翻转容器{
透视图：1000px；浮动：左；
}
.翻转容器，.正面，.背面{
宽度：160px；高度：220px；
}
.鳍状肢{
变换样式：保留-3d；位置：相对；
}
.前面，.后面{
背面可见性：隐藏；位置：绝对；顶部：0；左侧：0；
}
.前线{
z索引：2；变换：旋转（0度）；背景色：蓝色；
}
.回来{
变换：旋转（180度）；背景色：灰色；字体大小：13em；文本对齐：中心；垂直对齐：中间；
}
函数rnd（）{
var randNum=Math.floor（（Math.random（）*20）+1）；
如果（randNum%2==0）{//生成的数字是偶数
randNum=randNum+1；
}
返回randNum；
}
函数rotate（）{
$（'.flipper'）。每个（函数（i，obj）{
var rn=rnd（）；
var nn=180*rn；
var sp=0.2*rn；
控制台日志（rn）；
$（this.css（“transition”，sp+“s”）.css（“transform”，“rotateY”（+nn+“deg”））；
});
}

简单

要在这支笔中开始旋转，卡必须接收新的css

如果rnd（）函数生成的数字与前一个数字相同，则元素的css不会更改，因此浏览器不会启动动画，它认为动画已经播放过了（确实如此）

若要“重新启动动画”，若它有相同的参数，您有两种方法-或者从DOM中删除元素并将其返回（丑陋，啊？），或者您可以清除样式，然后在超时时将其设置回原位。这个技巧将有助于“重启”动画

$element.attr('style', null); //remove old style before setting new
setTimeout(function(){

   $element.css("transition", "0.6s");
   $element.css("transform", "rotateY("180deg)");
}, 100);

---

我用叉子叉了你的笔，让所有的卡片旋转。

你可以创建一个额外的检查器，以防止同一张卡片像以前一样收到准确的数字：

function rotate() {
  $('.flipper').each(function(i, obj) {
    var rn = rnd();
    if ( $(this).data('rn') == rn ) { rn = rn + 2; }
    var nn = 180 * rn;
    var sp = 0.2 * rn;
    $(this).data('rn', rn);
    $(this).css("transition", sp + "s");
    $(this).css("transform", "rotateY(" + nn + "deg)");
    console.log(i + ': ' + rn + ' -d: ' + $(this).data('rn'));
  });
}

工作演示：

函数rnd（）{
var randNum=Math.floor（（Math.random（）*20）+1）；
如果（randNum%2==0）{randNum=randNum+1；}
返回randNum；
}
函数rotate（）{
$（'.flipper'）。每个（函数（i，obj）{
var rn=rnd（）；
if（$（this）.data（'rn'）==rn）{rn=rn+2；}
var nn=180*rn；
var sp=0.2*rn；
$（此）.data（'rn'，rn）；
$（this.css（“transition”，sp+“s”）；
$（this.css（“transform”，“rotateY”（+nn+“deg）”）；
//console.log（i+':'+rn+'-d:'+$（this.data（'rn'））；
});
}
旋转（）；
$（'body'）。在（'click'，'#rotate'，function（）{rotate（）；}）上
.cards:：在{清除：两者；内容：''；显示：表；}之后
/*整个容器，保持透视*/
.翻转容器{
透视图：1000px；
浮动：左；
保证金：2倍；
}
.翻转容器，.正面，.背面{
宽度：160px；
高度：220px；
}
/*翻转速度在这里*/
.鳍状肢{
过渡：0.6s；
变换样式：保留-3d；
位置：相对位置；
}
/*交换期间隐藏窗格的背面*/
.前面，.后面{
背面可见性：隐藏；
位置：绝对位置；
排名：0；
左：0；
}
/*前窗格，置于后上方*/
.前线{
z指数：2；
/*对于Firefox31*/
变换：旋转（0度）；
背景颜色：蓝色；
}
/*背面，最初隐藏的窗格*/
.回来{
变换：旋转（180度）；
背景颜色：灰色；
字号：13em；
文本对齐：居中；
垂直对齐：中间对齐；
}

?
?
?
?
?
?
旋转
可能与随机性有关。我发现，当同一张卡与以前一样获得准确的随机数时，它不会旋转。这将是我的建议，AzizSo解决方案是在每次旋转之前将卡的位置重置为初始位置。