开发者社区> 问答> 正文

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

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

展开
收起
杨冬芳 2016-06-08 17:03:24 4250 0
1 条回答
写回答
取消 提交回答
  • IT从业

    直接上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>
    2019-07-17 19:32:21
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载