生成3D多棱柱的方法（3D立体图片）
先上一个效果图
主要运用的技术点就是
确认基点，确认每个盒子旋转的度数
3D变换 transform: rotateY(-360deg);
景深 perspective
3D舞台 transform-style: preserve-3d;
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生成任意棱柱的方法</title>
<style>
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
height: 600px;
width: 600px;
border: 1px solid;
margin: 20px auto;
perspective: 900px;
}
#main{
position: absolute;
height: 400px;
width: 200px;
/*border: 1px solid;*/
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transform-style: preserve-3d;
transition: 6s transform;
}
.div{
position: absolute;
height: 400px;
width: 200px;
/*border: 1px solid;*/
background-color: #1c86e5;
text-align: center;
font-size: 30px;
line-height: 400px;
}
#wrap:hover #main{
transform: rotateY(-360deg);
}
</style>
</head>
<body>
<div id="wrap">
<div id="main"></div>
</div>
<script>
window.onload=function () {
let boxNode=document.getElementById('main');
addLZ(8)
function addLZ(n) {
let deg=Math.tan((((180*(n-2))/n)/2)*(Math.PI/180));
let nodeStr=''
for (let i=0;i<n;i++){
nodeStr+=`<div class="div"></div>`;
}
boxNode.innerHTML=nodeStr;
let divNode=document.getElementsByClassName('div');
let width= parseFloat(window.getComputedStyle(divNode[0]).width);
let lenth=-(parseFloat(width/2)*deg);
let spend=360/n
boxNode.style.transformOrigin='center center'+' '+lenth+'px';
for (let i=0;i<n;i++){
divNode[i].style.transformOrigin='center center'+' '+lenth+'px';
divNode[i].style.transform=`rotateY(${i*spend}deg)`;
divNode[i].style.backgroundSize='100% 100%'
divNode[i].style.backgroundImage=`url(img/仁煌${i+1}.jpg)`;
}
}
}
</script>
</body>
</html>
调用add函数就可以生成你想要的的多棱柱了 ，插入图片就是3D立体图咯。
有一个小细节就是，js语言中没有度数的小句号 所以度数要转成弧度。
