jQuery将div翻转180度

基本上试图展示一系列类似于扑克牌或塔罗牌的牌，每一张牌的一面都有独特的图片或图像，另一面都有文字描述

加载页面时，图像将首先显示，但单击按钮时，卡将翻转180度以显示卡/图像的文本描述

因此，我想这是一个在3d中翻转图像的问题，同时显示后面的div。查看了Cycle插件，但不确定它是否是所需的

---

有人有什么想法吗？

使用CSS3进行轮换：

• 在Mozilla Firefox中，这将是

  -moz变换：旋转（180度）

• 在基于Webkit的浏览器中，例如Chrome:

  -Webkit变换：旋转（180度）

• 在Opera中：

  -o变换：旋转（180度）

• 在IE中：

  -ms变换：旋转（180度）

  （仅IE9）
• 在IE9之前：不容易实现，需要使用

用于统一所有浏览器差异

---

请参阅fiddle:

您可能正在寻找以下内容：

---

也许只是通过将一个缩小到零，另一个从零向上来伪装

$("#Card_Picture").click(function () {
  $('#Card_Picture').hide("scale", {percent: 0, direction: 'horizontal'}, 1000,function() {
  $('#Card_Text').show("scale", {percent: 100, direction: 'horizontal',  from: {height:120, width:0}}, 1000);
  });
});


<div id='Card_Picture' style="float:left; background: green; width: 80px; height: 120px; z-index:2; position:absolute;"></div>
<div id='Card_Text' style="float:left; background: red; width: 80px; height: 120px; z-index:1;position:absolute; display: none"></div>

$（“#卡片_图片”）。单击（功能（）{
$（'#Card_Picture'）。隐藏（“比例”，{百分比：0，方向：'水平'}，1000，函数（）{
$（'#Card_Text'）。显示（“比例”{百分比：100，方向：'水平'，起点：{高度：120，宽度：0}，1000）；
});
});

---

需要jQuery UI使用CSS和jQuery，甚至不需要插件：

CSS支持180度，支持不同浏览器：

.rotate-180 {
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}

然后通过jQuery用您选择的触发器简单地切换目标元素的类（我在我的场景中使用onClick，效果很好！）

$（.myelement”）。在（“单击”，函数（）上{
$（this.toggleClass（“rotate-180”）；
});

看看对不起，我不是很清楚-我的意思是以3d方式翻转180度，而不是正常旋转。例如，它从图像开始，然后单击翻转/扭曲以显示“卡片”的反面，这是一个与文本大小相同的div。我想它需要Html5画布不？你可以通过变换图像使其看起来90度（侧面朝上），并稍微倾斜透视，然后将图像交换为反向图像并继续动画。@diEcho确实支持翻转图像，似乎无法让它在小提琴上工作：——它只是得到了#的内容，而不是克隆div本身。它也只是在动画完成后推送内容。看起来这种效果只适用于基本div:|@Gary这可能并不完美，您只需检查他们使用的逻辑并根据需要修改代码即可：）@diEcho，当然，尽管他们没有任何使用图像的示例，但只有基本div，所以我想知道这是否可能。你给出的链接实际上有什么影响？很难说，因为他们提供的演示链接已经不起作用了。我发现下面的链接稍微简单一些，但对于我上面的目的可能会更好，因为它在文本/html方面似乎更具可定制性：

<script type="text/javascript">
    $(".myelement").on("click", function() {
        $(this).toggleClass("rotate-180");
    });
</script>