<!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. 编译安装nginx

    一.安装工具yum -y install zlib zlib-devel openssl openssl-devel pcre-devel cc-c++ autoconf automakeyum -y ...

  2. node的核心模块path

    //导入模块path var path=require("path"); //path.basename :输出文件名+后缀 //console.log(path.basename ...

  3. DDD建模案例----“视频课程”场景

    接触领域驱动设计DDD有一年多的时间了,中间看过不少书,参与过一些讨论(ENode QQ群).目前对DDD的认知还停留在理论阶段,所以对领域建模非常感兴趣,这里说的建模是指以DDD的思想为指导再加上D ...

  4. ORA-12638：身份证明检索失败

    本地Sqlplus 连一远程数据库,出现 ORA-12638: 身份证明检索失败,pl/sql developer 也是同样的问题,tnsping 是没有问题的. 找到本地的sqlnet.ora文件, ...

  5. 第五篇：在SOUI中使用XML布局属性指引(pos, offset, pos2type)

    窗口布局的概念 每一个UI都是由大量的界面元素构成的,在Windows编程,这些界面元素的最小单位通常称之为控件. 布局就是这些控件在主界面上的大小及相对位置. 传统的布局一般使用一个4个绝对坐标来定 ...

  6. Java 之 常用类（二）

    1.StringBuffer a.StringBuffer 与 String:①StringBuffer是一个全新的类型,与String没有继承关系 ②StringBuffer的出现是为了解决Stri ...

  7. 【Java 新建项目】使用程序对新项目的各个实体 创建Dao、DaoImpl、Service、ServiceImpl层的文件

    首先给出基本Dao层代码: GenericDao.java package com.agen.dao; import java.io.Serializable; import java.util.Co ...

  8. android-sdk 开发连接不上

    74.125.237.1       dl-ssl.google.com

  9. wpf 加载项目图片的几种写法

    new System.Windows.Media.Imaging.BitmapImage( new Uri("pack://application:,,,/TeacherAssistant. ...

  10. 根据oracle的主键列生成SQLserver的主键

    根据oracle的主键列生成MsSQLServer的主键列 select 'alter table  ' || cu.table_name ||'  add constraint  '||' PK_' ...