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

funnyF2E

80851217

发布于
2016-03-18

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

css javascript

阅读 27.2k

4 个回答

得票最新

zp1996

3.2k23763

发布于
2016-03-18

✓ 已被采纳

直接上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>