3D城市
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="关键词关键字">
<meta name="description" content="描述信息">
<title> 3dCity </title>
<style>
*{margin:0;padding:0;}
html,body{
width:100%;height:100%;perspective:1000px; /*距离多远观察*/
background-image:url("粒子.jpg");
background-repeat:no-repeat;
background-size:100% 100%;
}
div,b,i{
position:absolute; /*绝对定位，脱离文档流*/
transform-style:preserve-3d; /*3D视角*/
}
#city{
width:500px;height:500px;border:5px solid lightgray;
background:#ffe5b3;
margin:auto;top:0;left:0;right:0;bottom:0;
transform:rotateX(60deg)rotateZ(-130deg); /*旋转*/
}
#city b{
height:100%; /*继承上一级的高度，即div高度200px*/
transform:rotateX(90deg);
transform-origin:100% 0%; /*旋转中心，X轴占满即在X轴上，Y轴不变*/
}
#city b>b{
/*这里不用填写高度了，他会去他上一级找高度*/
transform:rotateY(90deg);
transform-origin:0% 100%;
}
#city b >b >b{
/*这里不用填写高度了，他会去他上一级找高度*/
transform:rotateY(90deg);
transform-origin:100% 0%;
right:0px;
}
#city b >b >b >b{
/*这里不用填写高度了，他会去他上一级找高度*/
transform:rotateY(90deg);
transform-origin:0% 100%;
left:0px;
}
#city b >b >b >b >i{
display:block; /*变成块级元素*/
background:#e5ccff;
transform-origin:0% 100%; /*Y轴100%，说明在Y轴最顶端*/
transform:rotateX(-90deg);
bottom:1px; /*房顶下去一点*/
}
#city .build b{
/*背景颜色，背景图片，以及图片大小*/
background:#368;
background-image:url("images/窗户.jpg");
background-size:10px 10px;
border:1px solid white;
}
</style>
</head>
<body>
<!--地皮-->
<div id="city">
<!--一栋楼-->
<div class="build" style="height:200px; top:40px;left:10px;"> <!--每栋楼坐标不同-->
<b style="width:40px;">
<b style="width:30px">
<b style="width:40px;">
<b style="width:30px">
<i style="width:30px;height:40px"></i>
</b>
</b>
</b>
</b>
</div>
<!--一栋楼-->
<div class="build" style="height:150px; top:40px;left:130px;"> <!--每栋楼坐标不同-->
<b style="width:80px;">
<b style="width:40px">
<b style="width:80px;">
<b style="width:40px">
<i style="width:40px;height:80px"></i>
</b>
</b>
</b>
</b>
</div>
<!--一栋楼-->
<div class="build" style="height:180px; top:30px;left:280px;"> <!--每栋楼坐标不同-->
<b style="width:50px;">
<b style="width:30px">
<b style="width:50px;">
<b style="width:30px">
<i style="width:30px;height:50px"></i>
</b>
</b>
</b>
</b>
</div>
<!--一栋楼-->
<div class="build" style="height:180px; top:230px;left:380px;"> <!--每栋楼坐标不同-->
<b style="width:30px;">
<b style="width:70px">
<b style="width:30px;">
<b style="width:70px">
<i style="width:70px;height:30px"></i>
</b>
</b>
</b>
</b>
</div>
<!--一栋楼-->
<div class="build" style="height:180px; top:280px;left:30px;"> <!--每栋楼坐标不同-->
<b style="width:40px;">
<b style="width:30px">
<b style="width:40px;">
<b style="width:30px">
<i style="width:30px;height:40px"></i>
</b>
</b>
</b>
</b>
</div>
<!--一栋楼-->
<div class="build" style="height:180px; top:230px;left:130px;"> <!--每栋楼坐标不同-->
<b style="width:50px;">
<b style="width:30px">
<b style="width:50px;">
<b style="width:30px">
<i style="width:30px;height:50px"></i>
</b>
</b>
</b>
</b>
</div>
</div>
</body>
</html>
效果：
3D城市的更多相关文章
- 我的世界 ParaCraft 结合开源地图 OpenStreetMap 生成3D校园的方法简介
我的世界ParaCraft结合开源地图OpenStreetMap生成3D校园的方法简介 版本1.0 日期2019.2.3 作者Ray (82735589@qq.com) www.TimeGIS.com ...
- 分享数百个 HT 工业互联网 2D 3D 可视化应用案例
过去的 2018 年,我们认为是国内工业互联网可视化的元年,图扑软件作为在工业可视化领域的重度参与者,一线见证了众多 HTML5/Web 化.2D/3D 化的项目在工业界应用落地,我们觉得有必要在此分 ...
- ThingJS和传统3D开发的区别
物联网3D可视化开发已经辐射到各行各业,无论车间还是消防,城市还是粮仓,亦或是地铁.科技园,物联网可视化是科技的进步,也是行业的进步.而传统的3D可视化开发实施起来并不那么乐观.如果使用ThingJS ...
- 3D数据采集和重建
3D数据采集和重建是从传感器数据生成三维或时空模型.一般而言,这些技术和理论适用于大多数或所有传感器类型,包括光学,声学,激光扫描,[1]雷达,热学,[2]地震.[3][4] 内容 · ...
- 【转】HTML5+WebGL：构建 3D 网页新世界
今年下半年, HTML5 和 WebGL 变成极热门词语,3D 网页来势汹汹.主流的浏览器 Google Chrome 以及 Mozilla Firefox 均致力于 HTML5+WebGL 的 3D ...
- 分享数百个 HT 工业互联网 2D 3D 可视化应用案例之 2019 篇
继<分享数百个 HT 工业互联网 2D 3D 可视化应用案例>2018 篇,图扑软件定义 2018 为国内工业互联网可视化的元年后,2019 年里我们与各行业客户进行了更深度合作,拓展了H ...
- 数百个 HT 工业互联网 2D 3D 可视化应用案例分享 - 2019 篇
继<分享数百个 HT 工业互联网 2D 3D 可视化应用案例>2018 篇,图扑软件定义 2018 为国内工业互联网可视化的元年后,2019 年里我们与各行业客户进行了更深度合作,拓展了H ...
- 2019-分享数百个 HT 工业互联网 2D 3D 可视化应用案例分享
继<分享数百个 HT 工业互联网 2D 3D 可视化应用案例>2018 篇,图扑软件定义 2018 为国内工业互联网可视化的元年后,2019 年里我们与各行业客户进行了更深度合作,拓展了H ...
- 使用three.js实现炫酷的酸性风格3D页面
背景 近期学习了 WebGL 和 Three.js 的一些基础知识,于是想结合最近流行的酸性设计风格,装饰一下个人主页,同时总结一些学到的知识.本文内容主要介绍,通过使用 React + three. ...
随机推荐
- 5G 将带给程序员哪些新机会呢？
5G,第 5 代移动通信技术,华为在此领域远远领先同行,这也让它成了中美贸易战的最前线.我的第一份工作就在通信行业,当时电信标准都在欧美企业手里,国内企业主要是遵照标准研发软硬件设备,核心芯片靠进口. ...
- BeanShell断言:根据响应的2个数据的比较结果来决定断言
需求:目前有一个请求,请求的响应中有2个值,aaa和bbb,我们比较aaa和bbb,如果aaa大于bbb,则断言通过,否则失败. 1.添加一个Dummy Sampler,模拟请求. 2.添加2个正则表 ...
- The instance of entity type 'manager' cannot be tracked because another instance with the same key value for {'id'} is already being tracked. When attaching existing entities, ensure that only one ent
最近在用ASP.NET CORE时遇到一些问题,现记录下: 出现上述错误,即在更新实体数据时出现的错误 services.AddDbContext<StoreContext>(c => ...
- 初步了解HTTP协议
1.HTTP简介 全称:Hyper Text Transfer Protocol,中文名:超文本传输协议. 功能:HTTP是客户端浏览器或其他程序与web服务器之间的应用层通信协议. 特点:a.支持 ...
- 《大空头》与A股内幕消息
目录 <大空头>简介 投行人士透露内幕消息不划算 <大空头>里合规性的一些解释 相信A股内幕消息的一些惨痛教训. 风险提示. <大空头>简介 <大空头> ...
- CF1327C Game with Chips 题解
原题链接 简要题意: 每个点有起始目标和终点(二维).要求每次将所有点向一个方向移动一次(四方向,若出界则不变),使得每个点均 经过 其终点. 本题只要抓住本质,瞬间得解. 你会发现,如果要求每个点最 ...
- BIT-逆序数
2019-12-17 09:42:44 问题描述: 问题求解: 逆序数问题非常经典,使用树状数组可以高效的解决这个问题. public List<Integer> countSmaller ...
- LeetCode45——从搜索算法推导到贪心
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode系列的第25篇文章,今天我们一起来看的是LeetCode的第45题,Jump Game II. 有同学后台留言问我说, ...
- 《JavaScript 模式》读书笔记（4）— 函数5
这一篇是函数部分的最后一篇.我们来聊聊Curry化. 十.Curry 这部分我们主要讨论Curry化和部分函数应用的内容.但是在深入讨论之前,我们需要先了解一下函数应用的含义. 函数应用 在一些纯粹的 ...
- leetcode 每日签到 409. 最长回文串
题目: 最长回文串 给定一个包含大写字母和小写字母的字符串,找到通过这些字母构造成的最长的回文串. 在构造过程中,请注意区分大小写.比如 "Aa" 不能当做一个回文字符串. 注意: ...