<!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>

　　

使用input range滑块，控制元素transform rotate旋转样式的更多相关文章

  1. 拒绝IE8-,CSS3 transform rotate旋转动画效果（支持IE9+/chrome/firefox）

    <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam ...

  2. 元素transform: rotate()之后，元素宽高该怎么计算？

    通常,利用transform: rotate()元素之后,我们并不会去在意元素大小的变化,因为看上去并没有什么变化.虽然看上去没有变化,其实是有变化的.下面用一个例子来说明一下. html: < ...

  3. transform:rotate/旋转

    <!DOCTYPE html> <html> <head> <style> div { width:100px; height:75px; backgr ...

  4. input range样式更改,模拟滑块

    input range 样式更改,js模拟滑块实时更新数据. 效果图: html 代码: <div> <span class="slider"></s ...

  5. transform:rotate()将元素进行不同角度的旋转

    通过设置transform:rotate()可以将元素进行不同角度的旋转: 下面是一些测试代码: <!DOCTYPE html> <html> <head> < ...

  6. 通过js获取元素css3的transform rotate旋转角度方法

    我们再试用jquery获取样式的时候是通过$('domName').css('transform'):的方式来获取元素的css样式,但是通过它获取到的css3的transform属性是以矩阵的方式呈现 ...

  7. 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的

    这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...

  8. 3种纯css方法控制元素隐藏显示

    1.通过hover,也是最常用的方式.此方法要求按钮与被控制元素必须有层级关系.(兼容低端浏览器常用) <div class="nav-btn"> <h2> ...

  9. CSS 控制元素 上下左右居中

    不说废话,直接 搞起..... 首先,我们将题目 <css控制元素上下左右居中> 分析一下哈,我是将其分成了4部分信息: 1.CSS控制: 只用 CSS 来达成目的 2.元素:  不只是d ...

随机推荐

  1. PHP获取时间、时间戳的各种格式

    1.获取当前时间方法date() 很简单,这就是获取时间的方法,格式为:date($format, $timestamp),format为格式.timestamp为时间戳--可填参数. 2.获取时间戳 ...

  2. [To do]Appx Package installed, can't start at first time

    When installed partition tool & mkrcvcd as windows store app. it can't start at first time. the ...

  3. System.Configuration引用后ConfigurationManager方法用不了

    System.Configuration引用后ConfigurationManager方法却用不了,提示没有引用 需手动添加引用 项目-引用-右击-添加引用-找到System.Configuratio ...

  4. C# 将数字时间转化为特定格式字符串

    在工作中,经常遇到,将距离某点的时间段转化为"HH:MM:SS"格式时间的情况. 经过总结,用C#实现了一个特别好的办法: DateTime  _dTNow = DateTime. ...

  5. IOS OC数据类型

    1.只有浮点型数据除以0.0才能得到+-无穷大的数,而整形或char型数据会得到边界值 2.BOOL的实际类型是signed char,他的底层只占一个字节(只有八位),如果将一个较大的非零整数值赋给 ...

  6. [Machine-Learning] 熟悉Matlab

    浮点数取整的几个函数 floor: 向下取整 ceil: 向上取整 round: 取最接近的整数 fix: 向0取整 不等于 Matlab 中,使用~=表示不等于. 数组相关操作 使用 [] 命名数组 ...

  7. git简单命令

    1. git status(不代参数) -- 查看本地修改过的文件 git status -s (简洁) 2. git add  -- 添加到暂存区 3. git commit -m '提交的mess ...

  8. 【jQuery】【转】jQuery中的trigger和triggerHandler区别

    trigger(event, [data]) 在每一个匹配的元素上触发某类事件. 这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit',则同样会导致浏览器 ...

  9. android HAL 教程（含实例）

    http://www.cnblogs.com/armlinux/archive/2012/01/14/2396768.html Android Hal 分析                       ...

  10. 通过sharedpreferences实现记住密码功能

    通过sharedpreferences实现记住密码功能