Maison > Questions et réponses > le corps du texte

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

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

PHP中文网2817 Il y a quelques jours325

répondre à tous(3)je répondrai

天蓬老师2017-04-10 17:43:57

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

répondre

大家讲道理2017-04-10 17:43:57

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

répondre

阿神2017-04-10 17:43:57

也可以用Jquery的rotate实现

répondre

Annulerrépondre