<!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. extarea输入的换行在网页上正常显示

    如图

  2. IOS进阶之WKWebView

    前言 Xcode8发布以后,编译器开始不支持IOS7,所以很多应用在适配IOS10之后都不在适配IOS7了,其中包括了很多大公司,网易新闻,滴滴出行等.因此,我们公司的应用也打算淘汰IOS7. 支持到 ...

  3. JS基础学习（二）

    昨天把网站上的基础知识看完了,下面是剩下的部分 第六节 JS Window浏览器对象模型 JavaScript全局对象,函数,变量均自动成为window对象的成员. 1.Window对象 1.获取浏览 ...

  4. Android使用CountDownTimer倒计时

    1.布局文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android ...

  5. Spring集成JUnit测试

    1.程序中有Junit环境2.导入一个jar包.spring与junit整合jar包 spring-test-3.2.0.RELEASE.jar3.测试代码 @RunWith(SpringJUnit4 ...

  6. react native RadioButton（单选按钮）

    刚刚写完这个多选按钮,我觉得没有单选的话,总会觉得有一点点不爽,因为在项目中我也没有用到单选,所以我没有好好研究源码,所以我在Github上找了一下,发现有一个挺好的,简单,不花哨. 在Github上 ...

  7. C#开发中常用方法2------json转DataTable

    /// <summary>/// 将json转换为DataTable/// </summary>/// <param name="strJson"&g ...

  8. Tomcat的粗略介绍

    因为工作的缘故很多项目启动需要通过Tomcat修改配置文件进行启动项目,所以相应的就了解了下Tomcat便于在以后比我更新的新人面前装逼. 1.bin目录 我们能用到的无非一个启动跟一个关闭没什么好说 ...

  9. 自己用的jquery经常用的工具command

    var Cmd = { Entity: { QueryString: {}, }, RootPath: function () { var pathName = window.location.pat ...

  10. Python2 新手 编码问题 吐血总结

    什么是编码 任何一种语言.文字.符号等等,计算都是将其以一种类似字典的形式存起来的,比如最早的计算机系统将英文文字转为数字存储(ASCII码),这种文字与数字(或其他)一一对应的关系我们称之为编码.由 ...