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

狄默默斯基 2012-03-20 04:59:03

要用js实现

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

...全文

361 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

lxjts 2012-03-21

打赏
举报

<!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>

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

狄默默斯基 2012-03-21

打赏
举报

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

狄默默斯基 2012-03-21

打赏
举报

[Quote=引用 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-……
[/Quote]

要西，很有借鉴意义