显示时Javascript旋转图像答案

【问题标题】：Javascript rotate img when display显示时Javascript旋转图像
【发布时间】：2014-03-15 23:30:46
【问题描述】：

我有一个脚本，当我们被怪物攻击时会显示一个 img。所以，图像总是在 display="none"，当有怪物时它会切换到 display="";

我希望图像在从 display:none 切换到 display 时进行 360° 翻转。

html : <img id="monster" style="display:none;">

js:var skinMonster = document.getElementById('monster');

当我们在战斗时，我会skinMonster.style.display="";

战斗结束后，我会skinMonster.style.display="none";

我不知道如何检测样式更改以旋转图片的时刻。

【问题讨论】：

标签： javascript css image events rotation

【解决方案1】：

您可以在更改显示的同一点添加一个 CSS 类。

.rotate {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);

    overflow:hidden;

    }

我在这篇博文中稍作修改：http://blog.vivekv.com/rotate-image-360deg-when-mouse-hover-using-css-3.html

【讨论】：

【解决方案2】：

我建议对旋转使用 CSS 过渡。

HTML

<img id="monster" src="http://www.avatarsdb.com/avatars/mike_monsters_inc.jpg" />
<button id="show">Show monster</button>

CSS

#monster {
    opacity: 0;
    transition: -webkit-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
}

#monster.show {
    opacity: 1;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

JavaScript

var monsterImg = document.getElementById('monster'),
    showMonsterButton = document.getElementById('show');

showMonsterButton.addEventListener('click', function() {

    monsterImg.classList.add('show');

});

用于演示目的的 JSFiddle：http://jsfiddle.net/9wkA7/

【讨论】：