生成3D多棱柱的方法（3D立體圖片）

時間 2019-12-12

標籤生成 3d 棱柱方法立體圖片简体版

原文原文鏈接

先上一個效果圖html

主要運用的技術點就是node

確認基點，確認每一個盒子旋轉的度數函數

3D變換 transform: rotateY(-360deg);url

景深 perspectivespa

3D舞臺 transform-style: preserve-3d;3d

代碼以下：code

<!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立體圖咯。orm

有一個小細節就是，js語言中沒有度數的小句號因此度數要轉成弧度。htm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。