<!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. MVC Code First 自动生成数据库

    1.新建一个MVC项目

  2. PowerDisner15 关于生成表带双""号问题

    我们可以尝试在DBMS配置文件中修改相应的格式来解决. 在PowerDesigner中 选择 Database->Edit current database->Script->Sql ...

  3. Hadoop HA高可用性架构和演进分析（转）

    1.概况 截至目前,Apache Hadoop版本分为两代,我们将第一代Hadoop称为Hadoop 1.0,第二代Hadoop称为Hadoop 2.0.前者主要有如下几种实现方式:1)社区版本基于S ...

  4. java反射详解

    本篇文章依旧采用小例子来说明,因为我始终觉的,案例驱动是最好的,要不然只看理论的话,看了也不懂,不过建议大家在看完文章之后,在回过头去看看理论,会有更好的理解. 下面开始正文. [案例1]通过一个对象 ...

  5. Win10 UI入门RelativePanel(2)

    自适应 1) Gif: 添加动画 2)

  6. CozyRSS开发记录21-默认RSS源列表

    CozyRSS开发记录21-默认RSS源列表 1.默认列表 在第一次使用CozyRSS的情况下,我们让它内置五个RSS源吧: 2.响应RSS源的更新 先不处理RSS源列表项的点击,响应下下拉菜单里的更 ...

  7. UILAbel 设置了attributedText 后省略号不显示

    今天遇见个大坑呀,UILabel我设置了 attributedText ,并且设置了 lineBreakMode = NSLineBreakByTruncatingTail 就是想让多余的内容显示成省 ...

  8. 设置NotePad++设置"不打开上次关闭的文件"

    notepad++是一个很好的记事本工具,但是默认会记录上次打开时未关闭的文件,但是实际上用起来并不方便, 可以按照下面的方式去除,notepad++版本:v6.6.2,os:win7 64位 按照以 ...

  9. 关于在django框架里取已登录用户名字的问题

    在 views里取值是这样的 request.user.username而在模板页面取值是这样的:{{request.user}} 判断是否通过验证是这样的 {% if request.user.is ...

  10. Mesos高可用解决方案剖析

    本文作者王勇桥,80后的IT攻城狮,供职于IBM多年,Mesos和Swarm社区的贡献者.本文是他根据自己对Mesos的高可用(High-Availability)设计方案的了解以及在Mesos社区贡 ...