<!DOCTYPE html>

<html>

<head>

	<title>3D布局</title>

	<style type="text/css" media="screen">

		#box{

			width:190px;

			height:170px;

			/*background: url(6.jpg) no-repeat;*/

			-webkit-perspective:800px;

			position: absolute;

		}

		#box div{

			position:absolute;

			left:10px;

			width:10px;

			height: 170px;

			background:url(6.jpg) no-repeat;

			background-size: cover;

			-webkit-transform-style:preserve-3d;

			-moz-transform-style:preserve-3d;

			transform-style: perspective-3d;

			-moz-transform-origin: left 160px;

		}

		#box>div{

			left:0;

			transform: translateX(100px);

		}

		.show{

			transform:rotateY(-40deg) rotateX(2deg);

		}

	</style>

</head>

<body>

	<div id="box">

		<div>

			<div style="background-position:-10px">

				<div style="background-position:-20px">

					<div style="background-position:-30px">

						<div style="background-position:-40px">

							<div style="background-position:-50px">

								<div style="background-position:-60px">

									<div style="background-position:-70px">

										<div style="background-position:-80px">

											<div style="background-position:-90px">

												<div style="background-position:-100px">

													<div style="background-position:-110px">

														<div style="background-position:-120px">

															<div style="background-position:-130px">

																<div style="background-position:-140px">

																	<div style="background-position:-150px">

																		<div style="background-position:-160px">

																			<div style="background-position:-170px">

																				<div style="background-position:-180px">

																				</div>

																			</div>

																		</div>

																	</div>

																</div>

															</div>

														</div>

													</div>

												</div>

											</div>

										</div>

									</div>

								</div>

							</div>

						</div>

					</div>

				</div>

			</div>

		</div>

	</div>

	<script src="jquery-1.12.4.min.js"></script>

	<script>

		var oDiv = $('#box div');

		setTimeout(function(){

			oDiv.each(function(){

	        	$(this).addClass('show');

	        	$(this).css('transition','.5s')

	        });

		},2000);

		setTimeout(function(){

			oDiv.each(function(){

	        	$(this).removeClass('show');

	        	$(this).css('transition','.5s')

	        });

		},4000)

	</script>

</body>

</html>

　　

3D布局的更多相关文章

  1. 安卓动态分析工具【Android】3D布局分析工具

    https://blog.csdn.net/fancylovejava/article/details/45787729 https://blog.csdn.net/dunqiangjiaodemog ...

  2. HTML5的WebGL实现的3D和2D拓扑树

    在HT for Web中2D和3D应用都支持树状结构数据的展示,展现效果各异,2D上的树状结构在展现层级关系明显,但是如果数据量大的话,看起来就没那么直观,找到指定的节点比较困难,而3D上的树状结构在 ...

  3. 基于HTML5的3D网络拓扑树呈现

    在HT for Web中2D和3D应用都支持树状结构数据的展示,展现效果各异,2D上的树状结构在展现层级关系明显,但是如果数据量大的话,看起来就没那么直观,找到指定的节点比较困难,而3D上的树状结构在 ...

  4. 基于HT for Web的3D拓扑树的实现

    在HT for Web中2D和3D应用都支持树状结构数据的展示,展现效果各异,2D上的树状结构在展现层级关系明显,但是如果数据量大的话,看起来就没那么直观,找到指定的节点比较困难,而3D上的树状结构在 ...

  5. 基于HT for Web的3D树的实现

    在HT for Web中2D和3D应用都支持树状结构数据的展示,展现效果各异,2D上的树状结构在展现层级关系明显,但是如果数据量大的话,看起来就没那么直观,找到指定的节点比较困难,而3D上的树状结构在 ...

  6. 排名前10的H5、Js 3D游戏引擎和框架

    由于很多人都在用JavaScript.HTML5和WebGL技术创建基于浏览器的3D游戏,所有JavaScript 3D游戏引擎是一个人们主题.基于浏览器的游戏最棒的地方是平台独立,它们能在iOS.A ...

  7. 使用webgl(three.js)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课

    序:这段时间忙于奔波,好久没有更新了,今天更新一下,继续上节课的完善讲解,算是对前段时间的一个总结吧.披星戴月的时光也算有点应用效果了. 对于webgl(three.js)性能这一块我在上节课< ...

  8. iOS流布局UICollectionView系列七——三维中的球型布局

      摘要: 类似标签云的球状布局,也类似与魔方的3D布局 iOS流布局UICollectionView系列七——三维中的球型布局 一.引言 通过6篇的博客,从平面上最简单的规则摆放的布局,到不规则的瀑 ...

  9. 再次阅读《精通CSS-高级Web标准解决方案（第二版）》

    昨天(2015年11月21日) 在我们学校举行了大型招聘会.我面试了三家企业.有一家企业是先做笔试题的,做完后发现自己还是很多细节处理得不够.无论还有没有二面,我还是要重新把<精通CSS> ...

随机推荐

  1. OpenGL中坐标系的理解（一）

    在OpenGL中,存在着至少存在着三种矩阵,对应着函数glMatrixMode()的三个参数:GL_MODELVIEW,GL_PROJECTION,GL_TEXTURE. 以下主要描述GL_MODEL ...

  2. APM程序分析-ArduCopter.cpp

    该文件是APM的主文件. #define SCHED_TASK(func, rate_hz, max_time_micros) SCHED_TASK_CLASS(Copter, &copter ...

  3. Easyui 去掉datagrid 行的样式，并点击checked 改边行颜色！

    --最近客户提出的需求 全选高亮样式太丑,每行选中不需要背景图片颜色,字体变黑色,未选中变灰色. 先把代码和改变后的图片 贴出来. /* 初始化DataFrid数据 */ initDataGrid: ...

  4. win7下cmd常用命令

    当在win7下执行命令出现右图状况 状况下可以采用鼠标放在指定的文件夹然后按shilt+鼠标右键可以出现下图的界面直接在此处打开cmd

  5. android 实现返回键执行home键方法

    在公司的产品开发,中老板很是执着于,不要看到启动界面,但是又不想去掉启动界面. so 实现返回键执行home键方法. public boolean onKeyDown(int keyCode, Key ...

  6. 查看sqlserver被锁的表以及如何解锁

    select request_session_id spid,OBJECT_NAME(resource_associated_entity_id) tableName from sys.dm_tran ...

  7. javascript之循环保存数值

    javascript之循环保存数值 语言都是相通的,这句话在我学javascript时有的深刻的意识.js中的for循环与java中的for循环有很大相似之处. 先看下面这段代码 for(var i= ...

  8. Linux /proc/$pid部分内容详解

    auxv /proc/[pid]/auxv包含传递给进程的ELF解释器信息,格式是每一项都是一个unsigned long长度的ID加上一个unsigned long长度的值.最后一项以连续的两个0x ...

  9. Python-面向对象（类）二

    一.成员修饰符 • 共有成员 • 私有成员 __+字段 __:成员修饰符 无法直接访问,只能通过该成员所属类的方法简介访问 class Foo: def __init__(self, name, ag ...

  10. CozyRSS开发记录22-界面退化

    CozyRSS开发记录22-界面退化 1.问题1-HtmlTextBlock 找的这个HtmlTextBlock有很严重的bug,有时候显示不完全,有时候直接就崩了.然后看了下代码,完全是学生仔水平写 ...