<!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. WdatePicker 没有权限 不能执行已释放 Script 的代码

    提示 拒绝访问 或 没有权限 或 ' Window.document 或 '$dp' 为空或不是对象 $dp.dd is undefined 之类的错误 SCRIPT70: 没有权限 WdatePic ...

  2. CheckBox 半选中状态

    <input type='checkbox' />可以半选中,这个特性,很多浏览器都支持,包括Firefox,Chrome和IE 用 input.indeterminate 这个属性来获取 ...

  3. python函数基础 与文件操作

    函数的定义 函数是通过赋值传递的,参数通过赋值传递给函数.def语句将创建一个函数对象并将其赋值给一个变量名,def语句的一般格式如下: def function_name(arg1,arg2[,.. ...

  4. PL/SQL Developer连接Oracle 11g在Win8 64位系统下乱码

    PL/SQL Developer在64位系统上连接Oracle,需要安装32位Oracle client客户端,使用后,发现操作数据库出现乱码的情况.经过查找资料,解决此问题,方法如下: 需要在系统的 ...

  5. MyBatis传入参数为集合、数组SQL写法

    参考:http://blog.csdn.net/small____fish/article/details/8029030 foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合 ...

  6. webpack配置技巧--路径

    resolve: { extensions: ['', '.js', '.vue'], fallback: [path.join(__dirname, '../node_modules')], ali ...

  7. 磁盘IO

    基本概念: 在数据库优化和存储规划过程中,总会提到IO的一些重要概念,在这里就详细记录一下,个人认为对这个概念的熟悉程度也决定了对数据库与存储优化的理解程度,以下这些概念并非权威文档,权威程度肯定就不 ...

  8. mybatis批量插入返回主键问题

    今天整合mybatis时候用到返回主键问题,批量插入总是返回不了主键还报错. 记录入下: pom版本: <mybatis.version>3.2.6</mybatis.version ...

  9. CEF源码编译和生产库的使用

    CEF版本是Branch 2171 开发环境是VS2012 查看一下libcef_dll_wrapper工程属性,确定Code Generation 选择MTD(Debug) 或者MT(Release ...

  10. 什么是原生的javascript

    在www.cocos.com的cocos2d-js的介绍中写道“Cocos2d-JS 是跨全平台的游戏引擎,采用原生JavaScript语言,可发布到包括Web平台,iOS,Android,Windo ...