<!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. 相机变换与Ray-Casting

    p { margin-bottom: 0.1in; direction: ltr; line-height: 120%; text-align: justify; orphans: 0; widows ...

  2. 创建/发布cocoapods公共库

    对于大多数iOS开发者而言,cocoapods都是一个非常便捷的第三方库引导工具,该工具可以帮助我们快速导入所需第三方库,并且进行相关配置. 本文即为描述如何发布一个第三方库,提供给所有的开发者使用. ...

  3. VS工具如何新建筛选器

    最近,遇到了一个问题,别人用VS工具新建了一个工程,不知道怎么的,就是没有办法新建筛选器. 今天,终于解决了,记录下,也希望能够帮助更多的人. 当我们的工程目录里的文件越来越多的时候,这时候需要建立帅 ...

  4. opencv2.4更换为opencv3.1后，mxnet编译错误（libpng16.so.16）

    编译显示错误为: /usr/bin/ld: warning: libpng16.so.16, needed by /usr/local/lib/libopencv_imgcodecs.so, not ...

  5. 【体系结构】动态调度算法：记分牌算法和tomasulo算法

    记分牌和tomasulo算法 动态调度: 通过硬件在程序执行时重新安排代码的执行序列来减少竞争引起的流水线停顿时间 动态调度流水线具备以下功能: (1)允许按序取多条指令和发射多条指令----取指(I ...

  6. jQuery对象与dom对象相互转换

    核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S('#id' ...

  7. MS SQLServer 批量附加数据库 分类： SQL Server 数据库 2015-07-13 11:12 30人阅读 评论(0) 收藏

    ************************************************************ * 标题:MS SQLServer 批量附加数据库 * 说明:请根据下面的注释 ...

  8. Codeforces Round #382 Div. 2【数论】

    C. Tennis Championship(递推,斐波那契) 题意:n个人比赛,淘汰制,要求进行比赛双方的胜场数之差小于等于1.问冠军最多能打多少场比赛.题解:因为n太大,感觉是个构造.写写小数据, ...

  9. 使用Redis的INCR、Hsetnx、Hincrby的命令生成序列号

    Redis INCR命令 用于由一个递增key的整数值.如果该key不存在,它被设置为0执行操作之前.如果key包含了错误类型的值或包含不能被表示为整数,字符串,则返回错误.该操作被限制为64位带符号 ...

  10. centos添加和删除用户及 xxx is not in the sudoers file.This incident will be reported.的解决方法

    修改主机名:vim /etc/sysconfig/network 1.添加用户,首先用adduser命令添加一个普通用户,命令如下: #adduser tommy //添加一个名为tommy的用户 # ...