当前位置：文江博客话题详情

CSS 过渡旋转 img

发布于 2024-12-09 21:31:30 字数 177 浏览 1 评论 0原文

我需要通过单击将 img 转换为 90 度，再次单击按钮后，img 旋转到 0 度。我有网站，其中包含 jQuery 的这些内容，但我需要它仅CSS。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

孤城病女 2024-12-16 21:31:30

必须使用 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" />

The transform:rotate() CSS property has to be used. I've written a (simple?) pure JS function for this purpose.

JS:

function rotate(elem, angle){
    //Cross-browser:
    var css = ["-moz-","-webkit-","-ms-","-o-","",""]
               .join("transform:rotate(" + angle + "deg);")
    elem.style.cssText += css;
}

Example, Fiddle: 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" />

回复收藏 0 原文

~没有更多了~