3d html5 如何保存 html 3d模型

转载

mob64ca14048514 2023-08-16 21:27:16

文章标签 3d html5 如何保存 css html 3d 3D 文章分类 HTML5 移动开发

以下是我完成的三个3D模型（内有分析和源代码）

3d html5 如何保存 html 3d模型_3d

3d html5 如何保存 html 3d模型_css_02

3d html5 如何保存 html 3d模型_css_03

主要是使用：

-webkit-perspective:1000px;/透视距/

transform-style: preserve-3d;/指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat（就是2D的）和preserve-3d。/

transform对3D模型进行操作；

我们首先要准备一个平台作为基准（也就是所有的3D元素的父节点），也就是一个三维坐标的原点，以此来对HTML的各种元素在3D空间中进行旋转、平移；
1
1
1
1

其中一些元素的用法：
发现rotate3d(20,0,0,45deg)，其实就是从原点指向(20,0,0)这个点构成一个方向轴，然后根据左手定则，四指指向方向为旋转方向，旋转45度。因此这样就很好解释了rotate3d（x,y,z,deg）属性，由原点指向(x,y,z)成方向轴，然后左手定则，确定旋转方向，进行相应的角度旋转，得到特效结果。

遇到一些小问题：

transform: rotateY(0deg) translateZ(0px);

里面的rotate和translate 顺序很重要，不同的顺序效果不同；

偷个懒，小技巧。由于要写超多div才能实现一些3D模型，往往这些div没有啥区别，于是想到了JS，利用for循环和div中的规律来自动实现div的加载；

源代码

首先来个最简单的，立方体：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--做一个正方体      3D模型 球 圆柱   多层-->
		<style type="text/css">
			.eye{
				width: 200px;
				height: 200px;
				position:absolute ;
				top: 50%;
				left: 50%;
				margin-top: -100px;
				margin-left: -100px;
				-webkit-perspective: 2000px;/*透视距*/
			}
			.stage{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				transform-style: preserve-3d;/*表示所有子元素在3D空间中呈现。*/
			}
			.stage>div{
				width: 200px;
				height: 200px;
				opacity:0.9;
				text-align: center;
				line-height: 200px;
				font-size: 30px;
				position: absolute;
				top: 0px;
				left: 0px;
				
			}
			.stage/*:hover*/{
				transform: rotate3d(45,45,40,60deg)/*rotate3d(0,30,0,180deg)*/;
				/*transition: 10s;*/
			}
			.ele1{
				background-color: red;
				transform: translateZ(200px);
			}
			.ele2{
				background-color:yellow;
				transform: rotateX(90deg) translate3d(0px,100px,-100px);
			}
			.ele3{
				background-color: blue;
				transform: rotateX(-90deg) translate3d(0px,-100px,-100px);
			}
			.ele4{
				background-color:green;
				transform: rotateY(-90deg) translate3d(100px,0,-100px);
			}
			.ele5{
				background-color: aquamarine;
				transform: rotateY(90deg) translate3d(-100px,0,-100px);
			}
			.ele6{
				background-color: brown;
				transform: rotateY(0deg) translateZ(0px);
			}
		</style>
	</head>
	<body>
		<div class="eye">
			<div class="stage">
				<div class="ele1">1</div>
				<div class="ele2">2</div>
				<div class="ele3">3</div>
				<div class="ele4">4</div>
				<div class="ele5">5</div>
				<div class="ele6">6</div>
			</div>
		</div>
	</body>
</html>

圆柱体：

<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--做一个正方体      3D模型 球 圆柱   多层-->
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<style type="text/css">
			.eye{
				width: 100px;
				height: 100px;
				position:absolute ;
				top: 50%;
				left: 50%;
				margin-top: -50px;
				margin-left: -50px;
				-webkit-perspective: 10000px;/*透视距*/
			}
			.stage{
				width: 100px;
				height: 500px;
				border: 1px solid red;
				transform-style: preserve-3d;/*3D效果*/
				transform: rotate3d(10,20,0,70deg)
			}
			.stage>div{
				width: 100px;
				height: 100px;
				opacity:0.95;/*透视程度*/
				text-align: center;
				line-height: 100px;
				font-size: 30px;
				position: absolute;
				top: 0px;
				left: 0px;
				
			}
			.stage:hover{
				transform: rotate3d(0,10,0,-1800deg);/*模型在3D中的位置*/
				transition: 40s;/*40s完成这个动作*/
			}
		</style>
	</head>
	<body>
		<div class="eye">
			<div class="stage">			
				<script>/*div基本上是一样的，一个一个写太浪费时间。于是有js来完成所有div的实现*/
				/*样式也得在这里完成，在css文件中或是在头中都不好完成css样式的循环*/
					for (var i=-70;i<=100;i++){
					    a='<div style="';
					    a+="background-color: rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+");";
						a+=' transform: rotateY('+i*15+'deg)'+' translateY('+i*5+'px)'+'translateZ(500px);';
					    a+='">';
					    a+=i;
						a+='</div>';
					   $(".stage").append(a);
					 }
				</script>
			</div>
		</div>
	</body>
</html>

只要明白大概的原理，3D效果的完成就是时间问题，几乎所有的都大同小异
球体：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--做一个正方体      3D模型 球 圆柱   多层-->
		<style type="text/css">
			.eye{
				width: 100px;
				height: 100px;
				position:absolute ;
				top: 50%;
				left: 50%;
				margin-top: -50px;
				margin-left: -50px;
				-webkit-perspective: 4000px;/*透视距*/
			}
			.stage{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				transform-style: preserve-3d;
				
			}
			.stage>div{
				width: 100px;
				height: 100px;
				opacity:0.8;
				text-align: center;
				line-height: 100px;
				font-size: 30px;
				position: absolute;
				top: 0px;
				left: 0px;
				
			}
			.stage:hover{
				transform: rotate3d(10,10,10,1800deg);
				transition: 50s;
			}
			.ele1{
				background-color: red;
				transform: translateZ(400px);
			}
			.ele2{
				background-color:yellow;
				transform: rotateX(30deg) translateZ(400px);
			}
			.ele3{
				background-color: blue;
				transform: rotateX(60deg) translateZ(400px);
			}
			.ele4{
				background-color:green;
				transform: rotateX(90deg) translateZ(400px);
			}
			.ele5{
				background-color: aquamarine;
				transform: rotateX(120deg) translateZ(400px);
			}
			.ele6{
				background-color: brown;
				transform: rotateX(150deg) translateZ(400px);
			}
			.ele7{
				background-color: blueviolet;
				transform: rotateX(180deg) translateZ(400px);
			}
			.ele8{
				background-color: #000000;
				transform: rotateX(210deg) translateZ(400px);
			}
			.ele9{
				background-color: coral ;
				transform: rotateX(240deg) translateZ(400px);
			}
			.ele10{
				background-color: beige;
				transform: rotateX(270deg) translateZ(400px);
			}
			.ele11{
				background-color: azure;
				transform: rotateX(300deg) translateZ(400px);
			}
			.ele12{
				background-color: darkkhaki;
				transform: rotateX(330deg) translateZ(400px);
			}
			
			
			.ele13{
				background-color: blue;
				transform: rotateX(15deg) rotateY(30deg) translateZ(400px);
			}
			.ele14{
				background-color:green;
				transform: rotateX(45deg)  rotateY(30deg)  translateZ(400px);
			}
			.ele15{
				background-color: aquamarine;
				transform: rotateX(75deg)  rotateY(30deg)  translateZ(400px);
			}
			.ele16{
				background-color: brown;
				transform: rotateX(105deg)  rotateY(30deg)  translateZ(400px);
			}
			.ele17{
				background-color: blueviolet;
				transform: rotateX(135deg)  rotateY(30deg)  translateZ(400px);
			}
			.ele18{
				background-color: #000000;
				transform: rotateX(165deg)  rotateY(30deg)  translateZ(400px);
			}
			.ele19{
				background-color: coral ;
				transform: rotateX(195deg)  rotateY(30deg)  translateZ(400px);
			}
			.ele20{
				background-color: beige;
				transform: rotateX(225deg)  rotateY(30deg)  translateZ(400px);
			}
			.ele21{
				background-color: azure;
				transform: rotateX(255deg)  rotateY(30deg)  translateZ(400px);
			}
			.ele22{
				background-color: darkkhaki;
				transform: rotateX(285deg)  rotateY(30deg)  translateZ(400px);
			}
			.ele23{
				background-color: beige;
				transform: rotateX(315deg)  rotateY(30deg)  translateZ(400px);
			}
			.ele24{
				background-color: azure;
				transform: rotateX(345deg)  rotateY(30deg)  translateZ(400px);
			}
			.ele25{
				background-color: darkkhaki;
				transform: rotateX(375deg)  rotateY(30deg)  translateZ(400px);
			}
			
			
			.ele26{
				background-color: blue;
				transform: rotateX(15deg) rotateY(-30deg) translateZ(400px);
			}
			.ele27{
				background-color:green;
				transform: rotateX(45deg)  rotateY(-30deg)  translateZ(400px);
			}
			.ele28{
				background-color: aquamarine;
				transform: rotateX(75deg)  rotateY(-30deg)  translateZ(400px);
			}
			.ele29{
				background-color: brown;
				transform: rotateX(105deg)  rotateY(-30deg)  translateZ(400px);
			}
			.ele30{
				background-color: blueviolet;
				transform: rotateX(135deg)  rotateY(-30deg)  translateZ(400px);
			}
			.ele31{
				background-color: #000000;
				transform: rotateX(165deg)  rotateY(-30deg)  translateZ(400px);
			}
			.ele32{
				background-color: coral ;
				transform: rotateX(195deg)  rotateY(-30deg)  translateZ(400px);
			}
			.ele33{
				background-color: beige;
				transform: rotateX(225deg)  rotateY(-30deg)  translateZ(400px);
			}
			.ele34{
				background-color: azure;
				transform: rotateX(255deg)  rotateY(-30deg)  translateZ(400px);
			}
			.ele35{
				background-color: darkkhaki;
				transform: rotateX(285deg)  rotateY(-30deg)  translateZ(400px);
			}
			.ele36{
				background-color: beige;
				transform: rotateX(315deg)  rotateY(-30deg)  translateZ(400px);
			}
			.ele37{
				background-color: azure;
				transform: rotateX(345deg)  rotateY(-30deg)  translateZ(400px);
			}
			.ele38{
				background-color: darkkhaki;
				transform: rotateX(375deg)  rotateY(-30deg)  translateZ(400px);
			}
			
			
			.ele39{
				background-color: darkkhaki;
				transform: rotateX(0deg)  rotateY(-60deg)  translateZ(400px);
			}
			.ele40{
				background-color: beige;
				transform: rotateX(60deg) rotateY(-60deg) translateZ(400px);
			}
			.ele41{
				background-color: red;
				transform:  rotateX(120deg) rotateY(-60deg) translateZ(400px);
			}
			.ele42{
				background-color:yellow;
				transform: rotateX(180deg) rotateY(-60deg) translateZ(400px);
			}
			.ele43{
				background-color: blue;
				transform: rotateX(240deg) rotateY(-60deg) translateZ(400px);
			}
			.ele44{
				background-color:green;
				transform: rotateX(300deg) rotateY(-60deg) translateZ(400px);
			}
			.ele45{
				background-color: aquamarine;
				transform: rotateX(360deg) rotateY(-60deg) translateZ(400px);
			}
			.ele46{
				background-color: brown;
				transform: rotateX(0deg) rotateY(60deg) translateZ(400px);
			}
			.ele47{
				background-color: blueviolet;
				transform: rotateX(60deg) rotateY(60deg) translateZ(400px);
			}
			.ele48{
				background-color: #000000;
				transform: rotateX(120deg) rotateY(60deg) translateZ(400px);
			}
			.ele49{
				background-color: coral ;
				transform: rotateX(180deg) rotateY(60deg) translateZ(400px);
			}
			.ele50{
				background-color: beige;
				transform: rotateX(240deg) rotateY(60deg) translateZ(400px);
			}
			.ele51{
				background-color: beige;
				transform: rotateX(300deg) rotateY(60deg) translateZ(400px);
			}
			
			.ele52{
				background-color: beige;
				transform: rotateX(0deg) rotateY(90deg) translateZ(400px);
			}
			.ele53{
				background-color: beige;
				transform: rotateX(0deg) rotateY(-90deg) translateZ(400px);
			}
		</style>
	</head>
	<body>
		<div class="eye">
			<div class="stage">
				<div class="ele1">1</div>
				<div class="ele2">2</div>
				<div class="ele3">3</div>
				<div class="ele4">4</div>
				<div class="ele5">5</div>
				<div class="ele6">6</div>
				<div class="ele7">7</div>
				<div class="ele8">8</div>
				<div class="ele9">9</div>
				<div class="ele10">10</div>
				<div class="ele11">11</div>
				<div class="ele12">12</div>

				<div class="ele13">13</div>
				<div class="ele14">14</div>
				<div class="ele15">15</div>
				<div class="ele16">16</div>
				<div class="ele17">17</div>
				<div class="ele18">18</div>
				<div class="ele20">20</div>
				<div class="ele19">19</div>
				<div class="ele21">21</div>
				<div class="ele22">22</div>
				<div class="ele23">23</div>
				<div class="ele24">24</div>
				<div class="ele25">25</div>
				
				<div class="ele26">26</div>
				<div class="ele27">27</div>
				<div class="ele28">28</div>
				<div class="ele29">29</div>
				<div class="ele30">30</div>
				<div class="ele31">31</div>
				<div class="ele32">32</div>
				<div class="ele33">33</div>
				<div class="ele34">34</div>
				<div class="ele35">35</div>
				<div class="ele36">36</div>
				<div class="ele37">37</div>
				<div class="ele38">38</div>
				
				
				<div class="ele39">39</div>
				<div class="ele40">40</div>
				<div class="ele41">41</div>
				<div class="ele42">42</div>
				<div class="ele43">43</div>
				<div class="ele44">44</div>
				<div class="ele45">45</div>
				
				<div class="ele46">46</div>
				<div class="ele47">47</div>
				<div class="ele48">48</div>
				<div class="ele49">49</div>
				<div class="ele50">50</div>
				<div class="ele51">51</div>
				
				<div class="ele52">52</div>
				<div class="ele53">53</div>
			</div>
		</div>
	</body>
</html>

层次模型：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--做一个正方体      3D模型 球 圆柱   多层-->
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<style type="text/css">
			.eye{
				width: 100px;
				height: 100px;
				position:absolute ;
				top: 50%;
				left: 50%;
				margin-top: -50px;
				margin-left: -50px;
				-webkit-perspective: 10000px;/*透视距*/
			}
			.stage{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				transform-style: preserve-3d;
				transform: rotate3d(10,20,0,70deg)
			}
			.stage>div{
				width: 100px;
				height: 100px;
				opacity:0.95;
				text-align: center;
				line-height: 100px;
				font-size: 30px;
				position: absolute;
				top: 0px;
				left: 0px;
				
			}
			.stage:hover{
				transform: rotate3d(0,10,0,360deg);
				transition: 40s;
			}
		</style>
	</head>
	<body>
		<div class="eye">
			<div class="stage">			
				<script>
				for(var k= -2 ; k <= 2 ; k++){
					for(var j= -1 ; j <= 1 ; j++){
						for (var i=-1;i<=1;i++){
						    a='<div style="';
						    a+="background-color: rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+");";
							a+=' transform: translateX('+i*200+'px)'+' translateY('+j*200+'px)'+'translateZ('+k*300+'px);';
						    a+='">';
						    a+=i;
							a+='</div>';
						   $(".stage").append(a);
						 }
					}
				}
				</script>
			</div>
		</div>
	</body>
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。