<!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. XE5 修复 安卓 输入法隐藏 后 无法退出的问题 3.2

    欢迎到  ① FireMonkey[DELPHI XE5]  165232328 交流开发技术. (************************************************** ...

  2. app开发方式大汇总

    1.原生方式.android平台使用java方式.IOS平台使用object-c或者swift方式.优点:可以将app的性能做到极致.缺点:开发效率低.维护成本高. 2.纯前端方式.比如用jquery ...

  3. Problems with MMM for mysql(译文)

    Problems with mmm for mysql posted in MySQL by shlomi 原文:http://code.openark.org/blog/mysql/problems ...

  4. Steve Loughran:Why not raid 0,its about time and snowflakes!!!

    与RAID-0阵列的同组管理相比,Hadoop更喜欢一组单独磁盘.在Hadoop集群中,读取速度是最能体现性能的重要指标.在Steve Loughran文章中,尤其强调了这一点,他还指出,由于驱动器速 ...

  5. html table表头斜线

    关于htnl的table的表头斜线,符合表格设计规范,<style> .biaotou { line-height: 5px; text-align: left; } .biaotou { ...

  6. 【转载】Tomcat崩溃事件

    转载地址:http://www.blogjava.net/tedeyang/archive/2008/06/04/205740.html Tomcat崩溃事件 今天一大早产品一部项目经理就来找我,他们 ...

  7. 24章 创建TPL自定义模板(1)

    鼓励分离 促进分工 smarty强大的模板引擎 自己开发可以深入了解模板引擎原理,并且简化(安全性,兼容性和功能不如开源的模板引擎) 流程图

  8. CSS使用

    CSS介绍 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 语法:style = 'key1:value1;key2:value2;' 存在方式有 ...

  9. 在Linux/Windows系统上编辑/etc/hosts文件

    Linux ubuntu16 open the terminal, input the command: sudo -i gedit /etc/hosts file click enter key, ...

  10. eclipse上修改js后,浏览器上还是出现原来效果的解决方法

    废话不多说,直接上方法: 1.最简单的是清除浏览器缓存.2.换个浏览器试试.3.修改js文件名,换成别的名称,再引用.4.重启eclipse.5.重启电脑.