生成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语言中没有度数的小句号 所以度数要转成弧度。