我需要通过单击将图像旋转到 90 度,然后再次单击按钮后图像旋转到 0 度。我的网站有这些 jQuery 但我只需要 css 。
问问题
1223 次
1 回答
3
必须使用transform:rotate()
CSS 属性。为此,我编写了一个(简单?)纯 JS 函数。
JS:
function rotate(elem, angle){
//Cross-browser:
var css = ["-moz-","-webkit-","-ms-","-o-","",""]
.join("transform:rotate(" + angle + "deg);")
elem.style.cssText += css;
}
例如,小提琴: http: //jsfiddle.net/zvuyc/:
<script>
window.onload = function(){
var angle = 0;
document.getElementById("button").onclick = function(){
angle += 90 % 360;
rotate(document.getElementById("image"), angle);
}
}
</script>
<input type="button" id="button" value="Rotate by 90deg">
<img src="http://simplyeng.com/wp-content/uploads/2008/11/indiana_tux.png" id="image" />
于 2011-10-15T16:46:40.307 回答