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

 

posted @ 2019-06-18 11:10  张弎  阅读(718)  评论(0)    收藏  举报