<!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. uexGaodeMap插件Android接入指引

    uexGaodeMap插件Android接入指引 高德地图插件是基于高德地图API封装的AppCan平台的插件模块.开发者集成及使用此插件,需要到高德开放平台为应用申请相应的APIKey,并将APIK ...

  2. SSIS变量属性中EvaluateAsExpression设置的作用

    我们在做SqlServer SSIS包开发的时候,经常会用到SSIS的变量,我们可以使用和修改SSIS变量的值使得SSIS包的逻辑更灵活,如下图所示: 在定义SSIS变量的时候可以使用固定值(如上图中 ...

  3. MaxScale：实现MySQL读写分离与负载均衡的中间件利器

    1. MaxScale 是干什么的? 配置好了 MySQL 的主从复制结构后,我们希望实现读写分离,把读操作分散到从服务器中,并且对多个从服务器能实现负载均衡. 读写分离和负载均衡 是MySQL集群的 ...

  4. 自定义一个可复用的BaseAdapter

    1.我们一点点开始改: 首先我们自定义BaseAdapter,等下我们就要对他进行升级改造 /** * Created by Jay on 2015/9/21 0021. */ public clas ...

  5. 我的第一个WebAPI程序

    最近在小武哥的带领下,我去接触了一下WebAPI,虽然说有点晚了,但是我还是学了一下,有点心得吧! 步骤: 1:在Visual Studio 2012中新建MVC4项目,在App_Start目录下有一 ...

  6. 不写完不回家的TreeSet

    TreeSet详解 继承架构图: |——SortedSet接口——TreeSet实现类 Set接口——|——HashSet实现类                  |——LinkedHashSet实现 ...

  7. java URL实现调用其他系统发送报文并获取返回数据

    模拟本系统通过Url方式发送报文到目标服务器,并获取返回数据:(实现类) import java.io.BufferedOutputStream; import java.io.BufferedRea ...

  8. java 垃圾回收

    转自:http://www.360doc.com/content/13/0305/10/15643_269388816.shtml

  9. 第一个python实例--监控cpu

    #第一个python实例:监控cpu #/bin/bash/env Python from __future__ import print_function from collections impo ...

  10. hive的使用02

    1.hive的交互方式 1.1 bin/hive 进入hive交互命令行环境 1.2 bin/hive -e 'select * from hive.student;' (可以通过 > 将结果写 ...