jQuery翻转div 180度

Posted 2023-05-08

【中文标题】jQuery翻转div 180度

【英文标题】：jQuery to flip div 180 degrees

【发布时间】：2011-08-29 12:51:45

【问题描述】：

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

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

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

有人有什么想法吗？

【问题讨论】：

看看***.com/questions/382591/…

【参考方案1】：

使用 CSS3 进行旋转：

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

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

见小提琴：http://jsfiddle.net/garreh/bqYUA/

【讨论】：

抱歉，我不是很清楚 - 我的意思是以 3D 方式翻转 180 度而不是正常旋转。因此，例如，它从图像开始，然后单击翻转/扭曲以显示“卡片”的反面，这是一个与文本大小相同的 div。我猜它需要 html5 Canvas 没有？

您可以通过将图像转换为 90 度（侧面朝上）来伪造它，并稍微倾斜以获得透视效果，然后将图像换成反向图像并继续动画。

【参考方案2】：

使用 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>

【参考方案3】：

可能你正在寻找这个：

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

【讨论】：

@diEcho 确实支持图像翻转，但似乎无法让它在小提琴上工作：jsfiddle.net/garreh/eFqVU/1 - 它只是获取#back 的内容而不是克隆 div 本身。一旦动画完成，它也只会推送该内容。看起来这种效果仅适用于基本 div :|

@Gary 可能并不完美，您只需检查他们使用的逻辑并根据需要更改代码:)

@diEcho，虽然他们没有任何使用图像的例子，只有基本的 div，所以我想知道这是否可能。你给出的那个链接实际上有什么样的效果？很难说，因为他们提供的演示链接已经失效了

我发现以下内容更简单一些，但可能更适合我的上述目的，因为它在 text/html 方面似乎更具可定制性：jonraasch.com/blog/quickflip-jquery-plugin

【参考方案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