Question

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

当页面加载时，图像将首先显示，但点击按钮时，卡片将翻转180度以显示卡片/图像的文字说明。

因此，我猜这是一个在3d中翻转图像同时揭示背后的div的问题。看看Cycle插件但不确定它是什么。

任何想法？

Answer 1

使用CSS3进行轮换：

在Mozilla Firefox中，这将是-moz-transform: rotate(180deg)
在基于Webkit的浏览器中，即Chrome：-webkit-transform: rotate(180deg)
在Opera中：-o-transform: rotate(180deg)
在IE中：-ms-transform: rotate(180deg)（仅限IE9）
在IE9之前：不太可能，需要使用Matrix Filter

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

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

Answer 2

可能你正在寻找这个：

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

Answer 3

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

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

.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 4

也许假装只是将一个缩小为零，另一个从零开始。

$("#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>

需要jQuery UI

jQuery将div翻转180度

4 个答案:

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