CSS3 3D立方体旋转

【HTML5+CSS3】

下载

新闻

文章

请按方向键来旋转，可以同时按下两个方向键达到侧向旋转效果为了达到更理想的效果请使用Apple Safari或Google Chrome 或Mozilla Firefox浏览器浏览

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
  <title>CSS3 3D立方体旋转</title>
 </head>
 <body>
<style>
body{
	-webkit-perspective: 800; 
	-webkit-perspective-origin: 50% 200px;	
	-moz-perspective: 800; 
	-moz-perspective-origin: 50% 200px;
	background-color:#efebe2
	}
#cube {
	position: relative;
	margin: 200px auto 0;
	height: 400px;
	width: 400px;
	-webkit-transition: -webkit-transform 2s linear;
	-webkit-transform-style: preserve-3d;	
	-moz-transition: -moz-transform 2s linear;
	-moz-transform-style: preserve-3d;
	}
.face {
	position: absolute;
	height: 360px;
	width: 360px;
	padding: 20px;
	background-color: rgba(50, 50, 50, 0.7);
	font-size: 27px;
	line-height: 1em;
	color: #fff;
	border: 1px solid #555;
	border-radius: 3px;
}
#cube .one  {
	-webkit-transform: rotateX(90deg) translateZ(200px);
	-moz-transform: rotateX(90deg) translateZ(200px);
}

#cube .two {
	-webkit-transform: translateZ(200px);
	-moz-transform: translateZ(200px);
}

#cube .three {
	-webkit-transform: rotateY(90deg) translateZ(200px);
	-moz-transform: rotateY(90deg) translateZ(200px);
}

#cube .four {
	-webkit-transform: rotateY(180deg) translateZ(200px);
	-moz-transform: rotateY(180deg) translateZ(200px);
}

#cube .five {
	-webkit-transform: rotateY(-90deg) translateZ(200px);
	-moz-transform: rotateY(-90deg) translateZ(200px);
}

#cube .six {
	-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
	-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
}
</style>

<div id="cube">
   <div class="face one">
			One face
   </div>
   <div class="face two">			
			请按方向键来旋转，可以同时按下两个方向键达到侧向旋转效果<p>http://www.scscms.com</p>为了达到更理想的效果请使用Apple Safari或Google Chrome 或Mozilla Firefox浏览器浏览
   </div>
   <div class="face three">
			Up, down, left, right
   </div>
   <div class="face four">
			New forms of navigation are fun.
   </div>
   <div class="face five">
			Rotating 3D cube
   </div>
   <div class="face six">
					<img src="http://www.scscms.com/logo.gif" />
   </div>
</div>


<script>
var xAngle = 0, yAngle = 0;
	document.addEventListener('keydown', function(e)
	{
		switch(e.keyCode){
		case 37:
						yAngle -= 90;
						break;
		case 38:
						xAngle += 90;
						break;
		case 39:
						yAngle += 90;
						break;
		case 40:
						xAngle -= 90;
						break;
		};
		document.getElementById("cube").style.webkitTransform = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
	}, false);
</script>
 </BODY>
</HTML>

效果：