使用 jQuery 旋转图像 OnClick？答案

【问题标题】：Rotate Image(s) OnClick With jQuery?使用 jQuery 旋转图像 OnClick？
【发布时间】：2011-12-13 20:26:51
【问题描述】：

我有这个代码： http://jsfiddle.net/Q4PUw/2/

因此，一个简单的隐藏到可见的 jQuery 脚本。

我想知道如何做的是在“扩展一个”类中有一个图像可以旋转 90 度，这样图像会在该类可见时朝下，然后一旦它变为隐藏，它就会旋转回来到它原来的位置。

有什么想法吗？

非常感谢！亚伦

【问题讨论】：

标签： javascript jquery image css rotation

【解决方案1】：

你可以用 css 做到这一点：http://jsfiddle.net/Tentonaxe/Q4PUw/6/

$('.expand-one').toggle(function() {
    $('.content-one').slideDown('slow');
    $(this).find("img").css({
        "-webkit-transform": "rotate(180deg)",
        "-moz-transform": "rotate(180deg)",
        "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"
    });
}, function() {
    $('.content-one').slideUp('slow');
    $(this).find("img").css({
        "-webkit-transform": "rotate(0deg)",
        "-moz-transform": "rotate(0deg)",
        "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)"
    });
});

【讨论】：

在那个小提琴中，图像不再是展开一。
这是最新小提琴中 dom 的更新小提琴：jsfiddle.net/Tentonaxe/Q4PUw/8
谢谢，现在我正在尝试获得旋转的动画效果。我知道你会是对的 =)。我最近在 SO 上注意到了你，你的答案似乎总是很准确。
@KevinB：非常感谢！ :)，我感谢您提供 jsFiddle 版本 8 代码，但先生，我只需要 6 个！ :)
好的，我得到了我想要的。丑陋的。但出于好奇而这样做。 jsfiddle.net/Q4PUw/11 似乎不是原生的 jQuery 或 CSS 方法。

【解决方案2】：

你可以用纯 HTML 做到这一点（它没有超慢褪色）：

<details>
<summary>Click Here To Display The Content</summary>
Hidden Content here, can be rotated with CSS3
</details>

【讨论】：