css旋转,点击按钮让图片旋转

funnyF2E
  • 788

现在有一个按钮,每次点击按钮后,让图片旋转90度,应该怎么做?

回复
阅读 22.7k
4 个回答
✓ 已被采纳

直接上demo好了,代码写的仓促,但是大概流程就是这样

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="zp" />
        <title>图片旋转</title>
        <style type="text/css">
            #img{
                border: 1px solid #000;
                display: block;
            }
        </style>
    </head>
    <body>
        <img src="logo.png" id="img" /> 
        <button id="button">旋转</button>
        <script type="text/javascript">
            var deg = 0;
            document.getElementById("button").onclick = function () {
                deg += 90;
                document.getElementById("img").style.transform = "rotate(" + deg + "deg)";
            }
        </script>
    </body>
</html>

css3有这个新加的属性,可以通过设置transform:rotate值来实现…

也可以用Jquery的rotate实现

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏