如何使一张网页呈现三维立体感

时间：2022-03-20 23:42:28
要用js实现

就比如一个div，让他相当于能够在网页中翻转，，感觉上就行

6 个解决方案

#1

是给网页右边框与下边框加上 css样式 呈现稍微的立体感?

#2



也可以
引用 1 楼 rainonly 的回复:
是给网页右边框与下边框加上 css样式 呈现稍微的立体感?

#3

你是说类似于那种记分牌的翻动效果么？

思路：
把一个DIV的高慢慢变成0，
在高度减少的同时，还要增加这个DIV的top值，
然后，又慢慢变回原样式，
在变回原样的同时，还要慢慢减少DIV的top值

而且，还要控制这个节奏，
不能是匀速的，

总之有点复杂

#4

据说html5 元素有翻转的，，用在div上行不？

#5

<!DOCTYPE html>

<html>

	<style type="text/css">

		body{width:1000px;height:1000px;}

		div{border:1px solid #F00;

		width:200px;height:100px;	

		background-color:#F00;

		margin:200px auto;}

		.a{

			transform:skew(-30deg,0deg);

			-webkit-transform:skew(-30deg,0deg);

		}		

	</style>

		<title>123</title>

<head>

<body>

		<div class="a" id="test">test</div>

</body>

</head>

 <script>

 	(function(getFocus){

		var drag=false;

		var cache={clickX:0,clickY:0};	

		var el=document.getElementById("test");	

		window.onmousedown = function(e){	

		         drag=true;		

				  var mPos = getFocus(e);

				  cache.clickX=mPos.x;

				  cache.clickY=mPos.y;

		}

		window.onmouseup=function(){ drag=false;        }		

		window.onmousemove = function(e){	

				    e.returnValue=false;		

					if (drag) { 

					try {

						       var mPos = getFocus(e);

							   var time=0.1;	

							   var newX=(mPos.x-cache.clickX)*time;

							   var newY=(mPos.y-cache.clickY)*time;

							   console.log(el.style);

							   	el.style.cssText="-webkit-transform:skew("+newX+"deg,"+newY+"deg)";							

							   }catch(e){

							   	console.log(e);

								}

					}

		}

	})(function(e){

	  var e=e||window.event;	  

	  var result={};

	  result.x=e.clientX;

	  result.y=e.clientY;

	  result.cx=e.offsetX;

	  result.cy=e.offsetY;

	  

	  return result;

})

 </script>

</html>


凑合用吧 移动范围过大时变化太大了 没处理..

#6

引用 5 楼 lxjts 的回复:
JScript code
<!DOCTYPE html>
<html>
    <style type="text/css">
        body{width:1000px;height:1000px;}
        div{border:1px solid #F00;
        width:200px;height:100px;    
        background-……



要西，很有借鉴意义

#1

是给网页右边框与下边框加上 css样式 呈现稍微的立体感?

#2



也可以
引用 1 楼 rainonly 的回复:
是给网页右边框与下边框加上 css样式 呈现稍微的立体感?

#3

你是说类似于那种记分牌的翻动效果么？

思路：
把一个DIV的高慢慢变成0，
在高度减少的同时，还要增加这个DIV的top值，
然后，又慢慢变回原样式，
在变回原样的同时，还要慢慢减少DIV的top值

而且，还要控制这个节奏，
不能是匀速的，

总之有点复杂

#4

据说html5 元素有翻转的，，用在div上行不？

#5

<!DOCTYPE html>

<html>

	<style type="text/css">

		body{width:1000px;height:1000px;}

		div{border:1px solid #F00;

		width:200px;height:100px;	

		background-color:#F00;

		margin:200px auto;}

		.a{

			transform:skew(-30deg,0deg);

			-webkit-transform:skew(-30deg,0deg);

		}		

	</style>

		<title>123</title>

<head>

<body>

		<div class="a" id="test">test</div>

</body>

</head>

 <script>

 	(function(getFocus){

		var drag=false;

		var cache={clickX:0,clickY:0};	

		var el=document.getElementById("test");	

		window.onmousedown = function(e){	

		         drag=true;		

				  var mPos = getFocus(e);

				  cache.clickX=mPos.x;

				  cache.clickY=mPos.y;

		}

		window.onmouseup=function(){ drag=false;        }		

		window.onmousemove = function(e){	

				    e.returnValue=false;		

					if (drag) { 

					try {

						       var mPos = getFocus(e);

							   var time=0.1;	

							   var newX=(mPos.x-cache.clickX)*time;

							   var newY=(mPos.y-cache.clickY)*time;

							   console.log(el.style);

							   	el.style.cssText="-webkit-transform:skew("+newX+"deg,"+newY+"deg)";							

							   }catch(e){

							   	console.log(e);

								}

					}

		}

	})(function(e){

	  var e=e||window.event;	  

	  var result={};

	  result.x=e.clientX;

	  result.y=e.clientY;

	  result.cx=e.offsetX;

	  result.cy=e.offsetY;

	  

	  return result;

})

 </script>

</html>


凑合用吧 移动范围过大时变化太大了 没处理..

#6

引用 5 楼 lxjts 的回复:
JScript code
<!DOCTYPE html>
<html>
    <style type="text/css">
        body{width:1000px;height:1000px;}
        div{border:1px solid #F00;
        width:200px;height:100px;    
        background-……



要西，很有借鉴意义
标签：

相关文章