1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>3D布局</title>
  5. 	<style type="text/css" media="screen">
  6. 		#box{
  7. 			width:190px;
  8. 			height:170px;
  9. 			/*background: url(6.jpg) no-repeat;*/
  10. 			-webkit-perspective:800px;
  11. 			position: absolute;
  12. 		}
  13. 		#box div{
  14. 			position:absolute;
  15. 			left:10px;
  16. 			width:10px;
  17. 			height: 170px;
  18. 			background:url(6.jpg) no-repeat;
  19. 			background-size: cover;
  20. 			-webkit-transform-style:preserve-3d;
  21. 			-moz-transform-style:preserve-3d;
  22. 			transform-style: perspective-3d;
  23. 			-moz-transform-origin: left 160px;
  24. 		}
  25. 		#box>div{
  26. 			left:0;
  27. 			transform: translateX(100px);
  28. 		}
  29. 		.show{
  30. 			transform:rotateY(-40deg) rotateX(2deg);
  31. 		}
  32. 	</style>
  33.  
  34. </head>
  35. <body>
  36. 	<div id="box">
  37. 		<div>
  38. 			<div style="background-position:-10px">
  39. 				<div style="background-position:-20px">
  40. 					<div style="background-position:-30px">
  41. 						<div style="background-position:-40px">
  42. 							<div style="background-position:-50px">
  43. 								<div style="background-position:-60px">
  44. 									<div style="background-position:-70px">
  45. 										<div style="background-position:-80px">
  46. 											<div style="background-position:-90px">
  47. 												<div style="background-position:-100px">
  48. 													<div style="background-position:-110px">
  49. 														<div style="background-position:-120px">
  50. 															<div style="background-position:-130px">
  51. 																<div style="background-position:-140px">
  52. 																	<div style="background-position:-150px">
  53. 																		<div style="background-position:-160px">
  54. 																			<div style="background-position:-170px">
  55. 																				<div style="background-position:-180px">
  56. 																				</div>
  57. 																			</div>
  58. 																		</div>
  59. 																	</div>
  60. 																</div>
  61. 															</div>
  62. 														</div>
  63. 													</div>
  64. 												</div>
  65. 											</div>
  66. 										</div>
  67. 									</div>
  68. 								</div>
  69. 							</div>
  70. 						</div>
  71. 					</div>
  72. 				</div>
  73. 			</div>
  74. 		</div>
  75. 	</div>
  76. 	<script src="jquery-1.12.4.min.js"></script>
  77. 	<script>
  78. 		var oDiv = $('#box div');
  79. 		setTimeout(function(){
  80. 			oDiv.each(function(){
  81. 	        	$(this).addClass('show');
  82. 	        	$(this).css('transition','.5s')
  83. 	        });
  84. 		},2000);
  85. 		setTimeout(function(){
  86. 			oDiv.each(function(){
  87. 	        	$(this).removeClass('show');
  88. 	        	$(this).css('transition','.5s')
  89. 	        });
  90. 		},4000)
  91. 	</script>
  92. </body>
  93. </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. mysqlDBA(1-3年)

    1.熟悉Aliyun操作系统的管理.配置和系统调优: 2.熟悉mysql管理 3.熟悉mysql主从复制,主主复制 4.熟悉数据库的备份策略,监控策略,性能测量策略 5.熟悉linux/unix操作系 ...

  2. ATM

    package duzhaonan;import java.util.Scanner;import javax.swing.JOptionPane;class Account{//创建的账户类 Str ...

  3. Spring学习（三）

    1,Spring的事务管理机制 Spring事务管理高层抽象主要包括3个接口,Spring的事务主要是由他们共同完成的: l PlatformTransactionManager:事务管理器-主要用于 ...

  4. 与你相遇好幸运，制作自己的Yeoman Generator

    使用别人写好的生成器: npm install -g yonpm install -g generator-angularyo angular 如何自己制作符合自己心仪的生成器呢: https://g ...

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

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

  6. SOUI与WTL

    如果你想使用SOUI最好有点WTL基础,一点点就行了. SOUI不依赖于WTL,但是SOUI的编码风格基本和WTL一样的:SOUI抄袭了WTL的消息处理形式,SOUI的事件处理也是模仿了WTL的消息映 ...

  7. Python-模块的使用

    基础概念 - 模块是Python组织代码的基本方式 - 一个Python脚本可以单独运行,也可以导入到另一个脚本中运行,当脚本被导入运行时,我们将其称为模块(module) - 所有的.py文件都可以 ...

  8. linux简单命令

    查看服务器开启的进程信息[root@CentOSHT ~]# top 其中第一行的  Load average 参数是服务器负载的意思,

  9. httpclient 无信任证书使用https

    1.当不需要使用任何证书访问https网页时,只需配置信任任何证书 HttpClient http = new HttpClient(); String url = "https://pay ...

  10. Nginx - Linux下按天分割日志

    待完善. 可参考:https://www.iteblog.com/archives/1244