(6)三棱柱3D实现、多棱柱3D实现

最新推荐文章于 2023-11-07 22:58:34 发布

进阶路

最新推荐文章于 2023-11-07 22:58:34 发布

阅读量661

点赞数 1

分类专栏：前端之HTML和CSS基础文章标签： 3d css javascript html 前端

本文链接：https://blog.csdn.net/Q_999999/article/details/124897100

版权

前端之HTML和CSS基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果图：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				width: 400px;
				height: 400px;
				border: 1px solid;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				perspective: 200px;
			}
			.box1 > .container{
				width: 100px;
				height: 100px;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				transform-style: preserve-3d;
				transition: 3s;
				transform-origin: center center -28.867513459481287px;	/*更改旋转中心*/
			}
			.container > div{
				width: 100px;
				height: 100px;
				background-color: rgba(0,255,0,1);
				position: absolute;
				text-align: center;
				font: 40px/100px "微软雅黑";
				transform-origin: center center -28.867513459481287px;	/*更改旋转中心*/
			}
			.container > div:nth-child(1){	
			}
			.container > div:nth-child(2){
				transform: rotateY(120deg);
			}
			.container > div:nth-child(3){
				transform: rotateY(240deg);
			}
			.box1:hover .container{
				transform: rotateY(360deg);
			}
			
		</style>
	</head>
	<body>
		<div class="box1">	<!--最外层区域-->
			<div class="container">	<!--六个面的包裹区，该div产生3D变化-->
				<div>1</div>
				<div>2</div>
				<div>3</div>
			</div>
		</div>
	</body>
	
</html>

原理分析：

俯视图：

补充知识：

等边三角形的性质：

（1）等边三角形是锐角三角形，等边三角形的内角都相等，且均为60°。

（2）等边三角形每条边上的中线、高线和角平分线互相重合。（三线合一）

（3）等边三角形是轴对称图形，它有三条对称轴，对称轴是每条边上的中线、高线或角的平分线所在的直线。

（4）等边三角形重心、内心、外心、垂心重合于一点，称为等边三角形的中心。（四心合一）

（5）等边三角形内任意一点到三边的距离之和为定值。（等于其高）

（6）等边三角形拥有等腰三角形的一切性质。（因为等边三角形是特殊的等腰三角形）

内角外角知识：

（1）n边形外角和：360deg；所以每个外角为 360/n

（2）内角 = 180 - 外角

（3）n边形内角和：180deg；所以每个内角为 180 - 360/n

实现三棱柱，让各个div绕着等边三角形的垂心进行旋转，旋转一个外角角度，旋转角度分析：

总结：所以最终每个div旋转的角度为外角角度，只不过是旋转几个而已

由于我在代码中已经给每个div都设置了宽高为100px，所以很容易求出垂心到各个边的距离（这个距离也就是各个div的旋转基点要沿着z轴的负半轴移动的距离）：

由于上述旋转角度和旋转基点移动距离都是一步一步求出来的，实现起来比较麻烦，当要求实现一个五棱柱或者其他棱柱时，都要重新计算角度，所以用js实现更为方便

效果图：

用js实现多棱柱代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			/*禁止系统滚动条*/
			html,body{
				height: 100%;
				overflow: hidden;
			}
			.box1{
				width: 400px;
				height: 400px;
				border: 1px solid;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				perspective: 500px;
			}
			.box1 > .container{
				width: 300px;
				height: 300px;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				transform-style: preserve-3d;
				transition: 10s transform;
				/* transform-origin: center center -28.867513459481287px;	/*更改旋转中心*/ */
			}
			.container > div{
				width: 300px;
				height: 300px;
				background-color: rgba(0,255,0,1);
				position: absolute;
				text-align: center;
				font: 40px/300px "微软雅黑";
				/* transform-origin: center center -28.867513459481287px;	/*更改旋转中心*/ */
			}
			.box1:hover .container{
				transform: rotateY(360deg);
			}
			
		</style>
	</head>
	<body>
		<div class="box1">	<!--最外层区域-->
			<div class="container">	<!--六个面的包裹区，该div产生3D变化-->
			</div>
		</div>
	</body>
	<script type="text/javascript">
		//n为棱数
		create(11);
		function create(n){
			//获取内角
			var degInner = 180 - 360/n;
			//获取外角
			var degOut = 360/n;
			
			var styleEle = document.createElement("style");
			var styleText = "";
			var containerEle = document.querySelector(".box1 > .container");
			var containerText = "";
			
			for (var i = 0; i < n; i++) {
				containerText += "<div>"+(i+1)+"</div>";
				styleText += ".container > div:nth-child("+(i+1)+"){transform: rotateY("+(i*degOut)+"deg);}"
			}
			
			//获取div的宽
			var divHeigth = containerEle.offsetWidth;
			styleText+=".box1 > .container{transform-origin: center center -"+(divHeigth/2*Math.tan((degInner/2)*Math.PI/180))+"px;}";
			styleText+=".container > div{transform-origin: center center -"+(divHeigth/2*Math.tan((degInner/2)*Math.PI/180))+"px;}";
			
			containerEle.innerHTML = containerText;
			styleEle.innerHTML = styleText;
			
			document.head.appendChild(styleEle);
		}
	</script>
</html>