将div翻转180度的jQuery

Question

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

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

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

有人有什么想法吗？

Answer 1

使用CSS3进行旋转：

Mozilla Firefox中的Opera Opera这将是基于-moz-transform: rotate(180deg)

• In Webkit的浏览器，即Chrome：-webkit-transform: rotate(180deg)

• In Opera：-o-transform: rotate(180deg)

• In IE：-ms-transform: rotate(180deg) (仅限IE9)

• 在IE9之前的版本中:不容易实现，将需要使用

使用jQuery rotate plugin统一所有浏览器差异。

请参阅： http://jsfiddle.net/garreh/bqYUA/

Answer 2

使用CSS和JQuery，你甚至不需要插件：

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

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

然后，只需使用您选择的触发器通过jQuery切换目标元素的类(我在我的场景中使用onClick，效果很好！)

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

Answer 3

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

http://blog.kenmoredesign.com/2009/01/26/flip-plugin-for-jquery/