Community Learn Tools Library Leisure
search
English
javascript - css旋转，点击按钮让图片旋转
PHP中文网
PHP中文网 2017-04-10 17:41:57
0
3
329

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

PHP中文网
PHP中文网

认证高级PHP讲师

reply all(3)
Peter_Zhu
Peter_Zhu2017-04-10 17:43:57 3 floor

直接上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>
Like +0
Add Reply
大家讲道理
大家讲道理2017-04-10 17:43:57 2 floor

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

Like +0
Add Reply
阿神
阿神2017-04-10 17:43:57 1 floor

也可以用Jquery的rotate实现

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template