3D 展示，为政务展示注入全方位驱动力

本文链接：https://blog.csdn.net/cybersnow/article/details/147936938

提升信息传播效率

直观呈现复杂信息：政务工作常涉及复杂政策、规划与项目，3D 展示能将抽象信息具象化。例如城市规划，以 3D 模型展示未来城区布局，道路、建筑、公共设施等空间关系一目了然，比传统文字、图表更易理解，使民众快速掌握核心要点。
增强信息记忆度：相比二维展示，3D 展示更具视觉冲击力与沉浸感。如 3D 动画演示政务办理流程，生动画面和互动体验加深民众印象，提升对政务信息的记忆与留存。

促进公众参与互动

激发公众兴趣：3D 展示的新颖形式吸引公众关注政务事务。在环保政策宣传中，用 3D 模拟生态破坏与修复场景，色彩丰富、动态逼真，激发公众兴趣，促使其主动了解政务内容，改变对政务信息枯燥的刻板印象。
支持互动体验：借助 VR、AR 等技术与 3D 展示结合，公众可沉浸式参与政务活动。如通过手机 AR 查看社区改造 3D 规划，从不同角度观察并实时反馈意见，增强公众参与感与积极性，为政务决策提供参考。

提升政务公开透明度

全面展示决策过程：重大工程建设或政策制定时，3D 展示可从项目规划到实施各阶段直观呈现。如水利工程建设，展示选址依据、施工步骤、预期效果，让公众监督决策过程，增强对政府决策的理解与信任。
增强信息可信度：3D 技术精确还原事物真实面貌，展示数据和成果更具说服力。在统计数据展示上，用 3D 图表展示经济发展、民生改善数据，直观对比变化，增强公众对政府工作成果的认可。

代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>3D旋转 - 相册</title>
	<style type="text/css">
		*{margin:0;padding:0;}
		body{
			background:#222;
			perspective:800px;/*景深*/
		}
		#wrap{
			position:relative;
			width:120px;
			height:180px;
			margin:auto;
			transform-style:preserve-3d;/*设置3D环境*/
		}
		#wrap img{
			position:absolute;
			width:133px;
			height:200px;
			box-shadow:0 0 10px #000;
			/*倒影:朝向 偏移*/
			-webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%);
			border-radius:5px;/*圆角*/
			/* transform:rotateY(0deg) translateZ(0px); */
			/*transition:1s 1s;动画执行的时间 动画延迟的时间*/
		}
		#wrap p{
			position:absolute;
			left:50%;
			top:112%;
			margin-left:-600px;
			margin-top:-600px;
			width:1200px;
			height:1200px;
			border-radius:50%;
			background:-webkit-radial-gradient(center center,600px 600px,rgba(122,122,122,0.2),rgba(0,0,0,0));
			transform:rotateX(90deg);
		}
	</style>
</head>
<body>
	<div id="wrap">
		<img src="https://i-blog.csdnimg.cn/direct/341cd2e1410f453eb5176be86343600d.png" alt="" />
		<img src="https://i-blog.csdnimg.cn/direct/9af80b0e363e4286942477f3e183758e.png" alt="" />
		<img src="images/3.jpg" alt="" />
		<img src="images/4.jpg" alt="" />
		<img src="images/5.jpg" alt="" />
		<img src="images/6.jpg" alt="" />
		<img src="images/7.jpg" alt="" />
		<img src="images/8.jpg" alt="" />
		<img src="images/9.jpg" alt="" />
		<img src="images/10.jpg" alt="" />
		<img src="images/11.jpg" alt="" />
		<p></p>
	</div>
	<script type="text/javascript">
		var oWrap = document.getElementById("wrap");
		var aImg = oWrap.getElementsByTagName("img");
		//让盒子自适应的垂直居中
		function mTop(){
			//获取浏览器窗口可视区域的高度
			var H = document.documentElement.clientHeight;
			oWrap.style.marginTop = H/2 - 180 + "px"
		}
		mTop();
		window.onresize = mTop;

		//图片初始动画
		var len = aImg.length;//获取图片的个数
		
		var Deg = 360/len;//每一张图片所占的角度
		for (var i=0;i<len;i++ )
		{
			aImg[i].style.transform = "rotateY("+i*Deg+"deg) translateZ(350px)";
			aImg[i].style.transition = "1s "+(len-1-i)*0.1+"s";
		}
		//鼠标事件(按下 移动 抬起) 拖拽旋转
		var lastX,lastY,nowX,nowY,minX,minY,roX=0,roY=0,timer;
		document.onmousedown = function(ev){
			clearInterval(timer);
			var ev = ev||window.event;
			//获取鼠标按下去的坐标位置
			lastX = ev.clientX;
			lastY = ev.clientY;
			this.onmousemove = function(ev){
				var ev = ev||window.event;
				//移动过程中鼠标的坐标位置
				nowX = ev.clientX;
				nowY = ev.clientY;
				//计算出鼠标坐标的差值
				minX = nowX - lastX;
				minY = nowY - lastY;
				//计算容器旋转的角度
				roY += minX*0.2;//roY = roY + minX*0.2
				roX -= minY*0.1;
				//console.log(roX,roY);
				//让整个图片容器跟随鼠标动
				oWrap.style.transform = "rotateX("+roX+"deg) rotateY("+roY+"deg)";
				lastX = nowX;
				lastY = nowY;
			}
			this.onmouseup = function(){
				this.onmousemove = null;
				this.onmouseup = null;
				timer = setInterval(function(){
					minX *=0.95;//让minX逐渐减小
					minY *=0.95;
					roY += minX*0.2;
					roX -= minY*0.1;
					oWrap.style.transform = "rotateX("+roX+"deg) rotateY("+roY+"deg)";
					//当minX达到足够小的值时 清楚定时器
					if (Math.abs(minX)<0.1 && Math.abs(minY)<0.1)
					{
						clearInterval(timer);
					}
				},1000/60);
			}
			return false;//阻止默认事件
		}
	</script>
</body>
</html>