使用input range滑块，控制元素transform rotate旋转样式

攻城狮羽铮技术 2022年11月7日

0 收藏 765 点赞 232 浏览 992 个字

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <!--
        第一步：设置div旋转对象和input滑块的基本属性值
        第二步：给input滑块添加一个onchange事件，获取滑块停止时的属性值
        第三步：将获取的input滑块属性值设置为div的旋转属性，附带显示当前旋转值
    -->    <div id="div1">
        transfrom rotate
    </div>    <div>
        <input type="range" min="-360" max="360" value="20"  onchange="rotate(this.value)" /> <br />
        transform:rotate(<span id="span1">20</span>deg);
    </div>    <style>
        #div1 {
            width:100px;
            height:70px;
            background-color:red;
            margin:50px 0;            transform:rotate(20deg);
            -ms-transform:rotate(7deg); /* Firefox */
            -moz-transform:rotate(7deg); /* Firefox */
            -webkit-transform:rotate(7deg); /* Safari and Chrome */
            -o-transform:rotate(7deg); /* Safari and Chrome */
        }
    </style>    <script>
        function rotate(value) {
            var obj1 = document.getElementById("div1");
            obj1.style.transform = "rotate(" + value + "deg)";
            obj1.style.webkitTransform = "rotate(" + value + "deg)";
            obj1.style.msTransform = "rotate(" + value + "deg)";
            obj1.style.MozTransform = "rotate(" + value + "deg)";
            obj1.style.OTransform = "rotate(" + value + "deg)";            var obj2 = document.getElementById("span1");
            obj2.innerHTML = value;
        }
    </script>
</body>
</html>