<!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. Scala基础语法

    /* 学慕课网上<Scala程序设计>课程跟着敲的代码 作为代码参考也是很好的 在scala_ide.org上下载eclipse IDE,新建一个worksheet,就可以像在xcode的 ...

  2. loadrunner总体使用篇

    为什么要进行性能测试呢?  有些问题是只有在大并发或者压力测试下才会暴露出来的,在平常的公司内部测试中,感觉一切都是正常的,但是把服务放到生产线上,例如某个时刻突然有很多的用户要向我们的服务发送请求, ...

  3. HDU 4289：Control（最小割）

    http://acm.hdu.edu.cn/showproblem.php?pid=4289 题意:有n个城市,m条无向边,小偷要从s点开始逃到d点,在每个城市安放监控的花费是sa[i],问最小花费可 ...

  4. ping命令脚本实现显示网络状态、学生姓名、学号

    #!/bin/bash a=. ####定义一个固定变量 h=(wanghao xieyunshen 刘桃) ####定义数组 ..} ####for循环,后面的in是条件即从多少循环到多少 do # ...

  5. SSO单点登录Spring-Security & CAS使用手册

    1.1概述 1.1.1单点登录介绍 单点登录(Single Sign On , 简称 SSO )是目前比较流行的服务于企业业务整合的解决方案之一, SSO 使得在多个应用系统中,用户只需要登录一次就可 ...

  6. ASP.NET Core 在 Swagger UI 中显示自定义的 Header Token

    Swagger 是个好东西,对于前后端分离的网站来说,不仅是提高前后端开发人员沟通效率的利器,也大大方便了后端人员测试 API.有时候,API 中可能需要在 Header 中设置认证参数,比如 aut ...

  7. python-正则表达式基础

    转载作者:AstralWind 1. 正则表达式基础 1.1. 简单介绍 正则表达式并不是Python的一部分.正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个独立的处理引擎,效率上可 ...

  8. JAVA经典算法40题(供面试所用)

    [程序1]   题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第四个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? 1.程序分析:   兔子的规律为数 ...

  9. Momentics创建Photon图形程序

    Photon microGui是qnx原生的UI图形工具.Qnx下开发Photon 一般是使用phAB来创建,使用默认的Momentics IDE也可以创建Photon图形程序. 首先需要创建一个c/ ...

  10. docker centos7 rabbitmq3.6.5

    docker run --name=rabbitmqtmp -ti centos7/jdk7 /bin/bash yum -y install make gcc gcc-c++ kernel-deve ...