<!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. OSI Model

  2. 项目中如何GB2312转UTF-8

    $str = mb_convert_encoding($str, "gb2312", "UTF-8"); // 这是一个PHP 自带函数 参数1 是要转的字符, ...

  3. 对属性NaN的理解纠正和对Number.isNaN() 、isNaN()方法的辨析

    1.属性NaN的误解纠正 NaN (Not a Number)在w3c 中定义的是非数字的特殊值 ,它的对象是Number ,所以并不是任何非数字类型的值都会等于NaN,只有在算术运算或数据类型转换出 ...

  4. ios web html 上传图片到服务器后方向不对解决

    结论: 1.ios上传会在exif中带一个 Orientation的属性,这个属性在windows中不会生效,在ios浏览器中会生效,造成图片在windows资源管理器中与ios浏览器中方向不一致 2 ...

  5. 下载最新版本的Oracle Database

    直接访问Oracle的官网就可以找到,鉴于Oracle经常改到下载面也我这里直接粘贴下载地址 http://www.oracle.com/technetwork/database/enterprise ...

  6. SCALA XML pattern attrbute(属性)

    from: Working with Scala's XML Support 虽然这个guy炒鸡罗嗦,但是还是讲到我要的那句话:  Because Scala doesn't support XML ...

  7. java 观察者模式

    /** 抽象的观察者 */ public interface Watcher { // status 为 被被观察着传递过来的状态 public void update(String status); ...

  8. php就业网版本已改版成功

    php就业网简介:www.php91.net,专注于Thinkphp框架教程的php框架学习中心.同时也有小崔老师自学php的教程,与你一起成长哦 同时,php就业网教程部分:http://www.p ...

  9. 浅析Java.lang.ProcessBuilder类

    最近由于工作需要把用户配置的Hive命令在Linux环境下执行,专门做了一个用户管理界面特地研究了这个不经常用得ProcessBuilder类.所以把自己的学习的资料总结一下. 一.概述      P ...

  10. 《编写可维护的JavaScript》——JavaScript编码规范（二）

    昨天是我偶像生日,现在整个人都还好兴奋啊O(∩_∩)O~  闲话少说,让我先发篇随笔留念一下^_^ ////////////////////////////////正文分割线///////////// ...