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. ...
随机推荐
- JS实战（京东秒杀）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- kubeasz部署高可用kubernetes1.17.2 并实现traefik2.1.2部署
模板机操作 # cat /etc/redhat-release CentOS Linux release 7.6.1810 (Core) # uname -a //内核升级到4.4.X以后, 关于如何 ...
- Spring Boot入门系列（六）如何整合Mybatis实现增删改查
前面介绍了Spring Boot 中的整合Thymeleaf前端html框架,同时也介绍了Thymeleaf 的用法.不清楚的朋友可以看看之前的文章:https://www.cnblogs.com/z ...
- c strncpy 容易出错的地方
使用strncpy的是注意两点,目的是数组和目的是指针 .目的是数组: ] = "abcde"; // ] = "; strncpy(dest,src,N); dest[ ...
- 练习div出现的小问题
一.出现图片不显示状况1.class中设定的名字不对2.在高单位后面出现了 “:“ 所以也不显示3.上一个div盒子没有写结束标签 4.在添加背景图,把height的值改成auto后不显示,填上具体数 ...
- 033.Kubernetes集群安全-API Server认证及授权
一 Kubernetes集群安全 1.1 安全机制 Kubernetes通过一系列机制来实现集群的安全控制,其中包括API Server的认证授权.准入控制机制及保护敏感信息的Secret机制等.集群 ...
- 将config从内部移动到外部 3部曲
1 创建 public/config.js /* eslint-disable no-shadow-restricted-names */ // eslint-disable-next-line no ...
- winform不能循环引用，使用接口传值到界面
public partial class frmMain : Form, IFormManager { 4 public frmMain() { InitializeComponent(); 8 } ...
- 视频 embed标签动态改变Src的值，局部刷新播放其他视频的javascript方法
看图: 视频处html代码: <div id="mod_player" class="mod_player"> <embed id=" ...
- 使用EPX Studio 7.0 下载网站验证码
implementation var Document_: DispHTMLDocument; //用于处理网页文档对象 EPX: IExcelPanelXDisp; procedure TForm1 ...