您当前位置:首页 > 文章中心 > HTML5+CSS3

CSS3 3D立方体旋转

稿件来源: 互联网   撰稿作者: 太阳光   发表日期: 2012-04-01   阅读次数: 467   查看权限: 游客查看

请按方向键来旋转,可以同时按下两个方向键达到侧向旋转效果为了达到更理想的效果请使用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>

 

效果:

关键词: html5,3D,立方体旋转   编辑时间: 2012-04-01

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐