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

我正在做一个纸牌游戏，制作一个简单的翻转效果。我一直坚持用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);
        });
    });

但如果我加上旋转：

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

你可以看到。它改变了它的位置、宽度和高度大小，翻转效果非常好。

---

可能我做错了什么，但我已经尝试了几个小时来解决这个问题，但没有成功。

我很难用javascript来解决这个问题，所以我建议用CSS3来解决这个问题

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

$（文档）.ready（函数（）{
$（“button.rotate”）。单击（函数（）{
$（“#卡”）.css({
“变换”：“旋转（90度）”
});
$（“#卡”）.toggleClass（'flip'）；
setTimeout（函数（）{
$（'卡片'）.toggleClass（'翻转'）；
}, 1000);
$（“按钮”）.hide（）；
});
$（“#卡”）.toggleClass（'flip'）；
setTimeout（函数（）{
$（'卡片'）.toggleClass（'翻转'）；
}, 1000);
});
#卡{
位置：相对位置；
宽度：300px；
高度：200px；
}
#名片，正面{
位置：绝对位置；
z指数：999；
-webkit变换：rotateX（0度）rotateY（0度）；
-webkit变换样式：保留-3d；
-webkit背面可见性：隐藏；
-moz变换：rotateX（0度）rotateY（0度）；
-moz变换样式：preserve-3d；
-moz背面可见性：隐藏；
过渡：所有1都易于输入输出；
-webkit转换：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
-o型转换：所有1均易于输入输出；
}
#卡片，翻转，正面{
z指数：9；
-webkit变换：rotateX（180度）；
-moz变换：rotateX（180度）；
}
#卡，回来{
位置：绝对位置；
宽度：300px；
高度：200px；
背景：#ff0000；
溢出：隐藏；
z指数：999；
-webkit变换：rotateX（-180度）；
-webkit变换样式：保留-3d；
-webkit背面可见性：隐藏；
-moz变换：rotateX（-180度）；
-moz变换样式：preserve-3d；
-moz背面可见性：隐藏；
过渡：所有1都易于输入输出；
-webkit转换：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
-o型转换：所有1均易于输入输出；
}
#扑克牌，翻转，后退{
z指数：10；
-webkit变换：rotateX（0度）rotateY（0度）；
-moz变换：rotateX（0度）rotateY（0度）；
}




Rotate
我很难用javascript实现这一点，所以我建议用CSS3实现更干净的解决方案

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


$（文档）.ready（函数（）{
$（“button.rotate”）。单击（函数（）{
$（“#卡”）.css({
“变换”：“旋转（90度）”
});
$（“#卡”）.toggleClass（'flip'）；
setTimeout（函数（）{
$（'卡片'）.toggleClass（'翻转'）；
}, 1000);
$（“按钮”）.hide（）；
});
$（“#卡”）.toggleClass（'flip'）；
setTimeout（函数（）{
$（'卡片'）.toggleClass（'翻转'）；
}, 1000);
});
#卡{
位置：相对位置；
宽度：300px；
高度：200px；
}
#名片，正面{
位置：绝对位置；
z指数：999；
-webkit变换：rotateX（0度）rotateY（0度）；
-webkit变换样式：保留-3d；
-webkit背面可见性：隐藏；
-moz变换：rotateX（0度）rotateY（0度）；
-moz变换样式：preserve-3d；
-moz背面可见性：隐藏；
过渡：所有1都易于输入输出；
-webkit转换：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
-o型转换：所有1均易于输入输出；
}
#卡片，翻转，正面{
z指数：9；
-webkit变换：rotateX（180度）；
-moz变换：rotateX（180度）；
}
#卡，回来{
位置：绝对位置；
宽度：300px；
高度：200px；
背景：#ff0000；
溢出：隐藏；
z指数：999；
-webkit变换：rotateX（-180度）；
-webkit变换样式：保留-3d；
-webkit背面可见性：隐藏；
-moz变换：rotateX（-180度）；
-moz变换样式：preserve-3d；
-moz背面可见性：隐藏；
过渡：所有1都易于输入输出；
-webkit转换：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
-o型转换：所有1均易于输入输出；
}
#扑克牌，翻转，后退{
z指数：10；
-webkit变换：rotateX（0度）rotateY（0度）；
-moz变换：rotateX（0度）rotateY（0度）；
}




旋转
哦，我想我找到了答案

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

哦，我想我找到了答案

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

你不明白我的问题。我想在旋转90度时翻转卡片。嘿，但是我需要使用transform rotate，因为卡片实际上是我正在旋转的图像。这对我很重要。我编辑了答案，但不是按照我们以前尝试过的方式，因为我不能用JS来做这件事，所以也许你会考虑CSS3方式。我已经找到了CSS方法。我真的希望jQuery本身有一种方法。不过，我会做最后一次尝试，如果我做不到，我会使用CSS方法。如果有人知道如何使用JS，我会很高兴看到他的解决方案。你不明白我的问题。我想在旋转90度时翻转卡片。嘿，但是我需要使用transform rotate，因为卡片实际上是我正在旋转的图像。这对我很重要。我编辑了答案，但不是按照我们以前尝试过的方式，因为我不能用JS来做这件事，所以也许你会考虑CSS3方式。我已经找到了CSS方法。我真的希望jQuery本身有一种方法。不过，我会做最后一次尝试，如果我做不到，我会使用CSS方法。如果有人知道如何使用JS，我会很高兴看到他的解决方案。