zoukankan      html  css  js  c++  java
  • html实战4--transform3D

    1。给每一个范围条绑定【input】事件
    2.修改范围条的兄弟元素文本
    3.通过js动态修改盒子形态

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Document</title>
    	<style>
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		.box{
    			 200px;
    			height: 200px;
    			border:2px dashed black;
    			perspective: 1000px;
    		}
    		.cur{
    			 200px;
    			height: 200px;
    			background-color: pink;
    		}
    	</style>
    </head>
    <body>
    	<div class=box>	
    		<div class='cur'></div>	
    	</div>
    	<p>
    		RX:<input type='range' min='0' max='360' value='0' name='rx'><span>0</span>
    	</p>
    	<p>
    		RY:<input type='range' min='0' max='360' value='0' name='ry'><span>0</span>
    	</p>
    	<p>
    		RZ:<input type='range' min='0' max='360' value='0' name='rz'><span>0</span>
    	</p>
    	<p>
    		TX<input type='range' min='0' max='360' value='0' name='tx'><span>0</span>
    	</p>
    	<p>
    		TY<input type='range' min='0' max='360' value='0' name='ty'><span>0</span>
    	</p>
    	<p>
    		TZ<input type='range' min='0' max='360' value='0' name='tz'><span>0</span>
    	</p>
    
    </body>
    </body>
    </html>
    <script>
    	//获取全部input标签
    	var ranges = document.querySelectorAll('input');
    	var spans = document.querySelectorAll('span');
    	var cur = document.querySelectorAll('.cur');
    	var rx = 'rotateX(0deg)',ry = 'rotateY(0deg)', rz = 'rotateZ(0deg)',tx = 'translateX(0px)',ty = 'translateY(0px)',tz = 'translateZ(0px)'
    	//批量添加事件
    	for(var i = 0;i<ranges.length;i++){
    		+function(index){
    			ranges[index].oninput=function(){
    				//修改span标签对应的文本
    				spans[index].innerHTML = this.value;
    				//通过范围条的name属性值区分范围条
    				switch(this.name){
    					
    					case 'rx':
    					rx = `rotateX(${this.value}deg)`;
    					break;
    					case 'ry':
    					ry = `rotateY(${this.value}deg)`;
    					break;
    					case 'rz':
    					rz = `rotateZ(${this.value}deg)`;
    					break;
    					case 'tx':
    					tx = `translateX(${this.value}px)`;
    					break;
    					case 'ty':
    					ty = `translateY(${this.value}px)`;
    					break;
    					case 'tz':
    					tz = `translateZ(${this.value}px)`;
    					break;
    				}
    
    				cur[0].style.transform = rx+' '+ry+' '+rz+' '+tx+' '+ty+' '+tz;
    			}
    		}(i);
    	}
    </script>
    

  • 相关阅读:
    django中的objects.get和objects.filter方法的区别
    Django之CSRF
    Django之include本质
    django中的FBV和CBV
    HTTP协议【详解】——经典面试题
    Python中的魔法函数__repr__和__str__的实质性区别
    浅谈CSS中的百分比
    深入理解定时器系列第一篇——理解setTimeout和setInterval
    Javascript学习
    HTML中块级元素和行内元素的总结和区分。
  • 原文地址:https://www.cnblogs.com/tingshu/p/14409162.html
Copyright © 2011-2022 走看看