实现效果：

实现代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			#aa{

				margin: 100px auto;

				width: 200px;

				height: 200px;

				transform-style: preserve-3d;

				position: relative;

				transform: rotateX(-15deg) rotateY(45deg);

				animation: name 6s linear 100ms infinite;

			}

			.bb{

				position: absolute;

				width: 100px;

				height: 100px;

				left: 0;

				right: 0;

				background-color: rgba(232,222,45,0.6);

			}

			.qian{

				transform: translateZ(50px);

				background-color: rgba(23,22,4,0.6);

			}

			.hou{

				transform: translateZ(-50px);

				background-color: rgba(23,122,56,0.6);

			}

			.zuo{

				transform: rotateY(270deg) translateZ(-50px);

				background-color: rgba(223,122,74,0.6);

			}

			.you{

				transform: rotateY(270deg) translateZ(50px);

				background-color: rgba(13,22,254,0.6);

			}

			.shang{

				transform: rotateX(270deg) translateZ(-50px);

				background-color: rgba(223,12,144,0.9);

			}

			.xia{

				transform: rotateX(270deg) translateZ(50px);

				background-color: rgba(23,252,144,0.6);

			}

			@keyframes name{

				from{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}

				to{ transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}

			}

		</style>

	</head>

	<body>

		<div id="aa">

			<div class="bb  qian"></div>

			<div class="bb  hou"></div>

			<div class="bb  zuo"></div>

			<div class="bb  you"></div>

			<div class="bb  shang"></div>

			<div class="bb  xia"></div>

		</div>

	</body>

</html>

HTML5 纯CSS3实现正方体旋转3D效果的更多相关文章

  1. 一款纯css3实现的图片3D翻转幻灯片

    之前介绍了好多款网页幻灯片,今天要给大家再带来一款纯css3实现的图片3D翻转幻灯片.这款幻灯片图片轮播采用了3D翻转的形式,效果非常不错.一起看下效果图: 在线预览   源码下载 实现的代码. ht ...

  2. 纯CSS3实现的动感菜单效果

    1. [代码] 纯CSS3实现的动感菜单效果 <!DOCTYPE html><head><meta http-equiv="Content-Type" ...

  3. 纯CSS3悬停图标旋转导航动画代码

    分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="x_con ...

  4. Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果，一款强大的扁平化长投影制造器。

    Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器. Long Shadows Generate 彩蛋爆料直击现场 Long Shadow ...

  5. 9种纯CSS3人物信息卡片动态展示效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  6. 纯CSS3实现常见多种相册效果

    本文包含 1.CSS3中2D转换和3D转换的介绍. 2.在相册中的应用实例. CSS3中的转换效果和动画效果十分强大好用,可以实现一些常见的动态效果. 如此一来,CSS3便可以代替许多jQuery的功 ...

  7. 纯Css3手工打造网页图片效果

    .rotate-demo { width: 220px; height: 220px; margin: 0 auto; background: no-repeat url("http://i ...

  8. 纯CSS3实现轮播切换效果

    使用纯css3实现与轮播器一样的功能. HTML代码: <div class="slide-container"> <input type="radio ...

  9. 纯CSS3实现一个旋转的3D立方体盒子

    简单介绍 上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果 注:代码在chrome 43.0.2357 ...

随机推荐

  1. D3学习-加载本地数据

    在加载本地数据时,弄了很久都无法显示出来,后来才知道是要把数据文件和html文件都加载到服务器上面 这样就可以显示出来了,

  2. 艺恩网内地总票房排名Top100信息及其豆瓣评分详情爬取

    前两天用python2写的一个小爬虫 主要实现了从http://www.cbooo.cn/Alltimedomestic这么个网页中爬取每一部电影的票房信息等,以及在豆瓣上该电影的评分信息 代码如下 ...

  3. Linux:cp -rp

    cp -rp[原文件或目录] [目标文件或目录] -r   复制目录 - p   保留文件属性 范例: cp -r /yy/k /yy/u /mm 复制目录u和目录k到目录mm中 cp -r /yy/ ...

  4. js将数字转为千分位/清除千分位

    /** * 千分位格式化数字 * * @param s * 传入需要转换的数字 * @returns {String} */ function formatNumber(s) { if (!isNaN ...

  5. 常用windows命令和Dos命令

    Windows常用快捷键 Ctrl + C :复制 Ctrl + V :粘贴 Ctrl + X :剪切 Ctrl + A :全选 Ctrl + Z :撤销(做错了后退一步) Ctrl + Y :向前一 ...

  6. 回溯——51. N皇后

    这一题在我刚开始拿到的时候,是一点思路都没有的,只能先分析题目的要求,即queen之间的规则: 不能同行 不能同列 不能同斜线 不能同左斜 不能同右斜 同时发现,在寻找所有可能结果的穷举过程中,传入的 ...

  7. 从一次解决Nancy参数绑定“bug”开始发布自己的第一个nuget包（上篇）

    起因 最近,同事跟我说,他们负责的一个Api程序出现了一些很奇怪的事情.这个Api是为环保局做的一个扬尘质控大屏提供数据的,底层是基于Nancy做的.因为发现有些接口的数据出现异常,他就去调试了一下, ...

  8. Laravel框架角色、权限

    角色表结构如下: 权限表结构如下: 控制器代码: //递归查询权限列表 public function index(){ $data = ManagePermissionModel::query()- ...

  9. Python用pandas获取Excel数据

    import pandas as pd df1 = pd.DataFrame(pd.read_excel(r'C:\python测试文件\我的三国啊.xlsx',sheet_name='Sheet1' ...

  10. 工作组规划器（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 好像前面每分配一次任务,都要打开一个对话框,有木有简单粗暴点的法子啊? 必须有啊! 视图里有一种[工作组规划器],想要粗暴 ...