先上一个效果图

主要运用的技术点就是

确认基点，确认每个盒子旋转的度数

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

生成3D多棱柱的方法（3D立体图片）的更多相关文章

  1. Discovery直播 | 3D“模”术师，还原立体世界——探秘3D建模服务

    通过多张普通的照片重建一个立体逼真的3D物体模型,曾经靠想象实现的事情,现在, 使用HMS Core 3D建模服务即可实现! 3D模型作为物品在数字世界中的孪生体,用户可以自己拍摄.建模并在终端直观感 ...

  2. WPF 3D 小小小小引擎 - ·WPF 3D变换应用

    原文:WPF 3D 小小小小引擎 - ·WPF 3D变换应用 WPF可以提供的3D模型使我们可以轻松地创建3D实体,虽然目前来看还很有一些性能上的问题,不过对于一些简单的3D应用应该是可取的,毕竟其开 ...

  3. python快速生成注释文档的方法

    python快速生成注释文档的方法 今天将告诉大家一个简单平时只要注意的小细节,就可以轻松生成注释文档,也可以检查我们写的类方法引用名称是否重复有问题等.一看别人专业的大牛们写的文档多牛多羡慕,不用担 ...

  4. sublime text 乱码生成.dump问题的解决方法

    title: sublime text 乱码生成.dump问题的解决方法 tags: sublime text,sublime text 3,.dump,乱码 grammar_cjkRuby: tru ...

  5. C#生成二维码的方法

    本文实例讲述了C#生成二维码的方法.分享给大家供大家参考.具体实现方法如下: 首先引用ThoughtWorks.QRCode.dll 具体代码如下: 复制代码 代码如下: using System; ...

  6. Mybatis Generator自动生成的mapper只有insert方法

    – Mybatis Generator 生成的mapper只有insert方法 – 首先检查generatorConfig.xml中table项中的属性 enableSelectByPrimaryKe ...

  7. javascript生成对象的三种方法

    /** js生成对象的三种方法*/ // 1.通过new Object,然后添加属性 示例如下: var people1 = new Object(); people1.name = 'xiaohai ...

  8. [转][Android][Android Studio] *.jar 与 *.aar 的生成与*.aar导入项目方法

     转自:http://blog.csdn.net/qiujuer/article/details/39754517?utm_source=tuicool [Android][Android Studi ...

  9. php生成随机数的三种方法

    php生成随机数的三种方法 如何用php生成1-10之间的不重复随机数? 例1,使用shuffle函数生成随机数. <?php$arr=range(1,10);shuffle($arr);for ...

随机推荐

  1. WSGI标准、MVC和MTC框架

    WSGI服务: wsgiref模块其实就是将整个请求信息给封装了起来,就不需要你自己处理了,假如它将所有请求信息封装成了一个叫做request的对象,那么你直接request.path就能获取到用户这 ...

  2. Unity 游戏框架：命名的力量--变量

    变量的命名入门 大家先来试着理解一下这段代码: var todoList = new TodoList(); todoList.Todos = new List<Todo>(); var ...

  3. 洛谷P1003 铺地毯 模拟

    这一题就是一个很普通的模拟,每次输入的时候存储四个角的值 把四个角的横纵坐标存储在一排.然后在倒序遍历一遍,查找的时候就看所要查找的坐标在不在这个范围内,如果找到了就标记一下再输出,如果没有找到就输出 ...

  4. leetcode 签到 836. 矩形重叠

    836. 矩形重叠 矩形以列表 [x1, y1, x2, y2] 的形式表示,其中 (x1, y1) 为左下角的坐标,(x2, y2) 是右上角的坐标. 如果相交的面积为正,则称两矩形重叠.需要明确的 ...

  5. python ndarray与pandas series相互转换，ndarray与dataframe相互转换

    https://blog.csdn.net/qq_33873431/article/details/98077676

  6. 【总结】办公&编程&学习你可能需要这些小利器！

    偶然想到自己从最开始的编程小白,什么都不懂,看啥啥新鲜的时期,到现在颇有"蓦然回首,那人却在灯火阑珊处"的感觉,遂想整理一下这一路学习我个人发现的在办公.编程或者学新知识等方面针对 ...

  7. Ubuntu 18.04 将gcc版本降级为5.5版本

    Remark: Polynomial algebra 程序由于版本问题只能在gcc 5.0 版本运行, 而ubuntu更新会将gcc 更新到7.0版本,出现冲突(报错:如下) collect2: er ...

  8. POJ旅行商问题——解题报告

    旅行商问题 总时间限制: 1000ms 内存限制: 65536kB 描述 某国家有n(1<=n<=10)座城市,给定任意两座城市间距离(不超过1000的非负整数).一个旅行商人希望访问每座 ...

  9. random方法

    random.randint(1,10)     # 产生 1 到 10 的一个整数型随机数 ,包括1和10random.random()        # 产生 0 到 1 之间的随机浮点数rand ...

  10. 【Springboot】实例讲解Springboot整合OpenTracing分布式链路追踪系统（Jaeger和Zipkin）

    1 分布式追踪系统 随着大量公司把单体应用重构为微服务,对于运维人员的责任就更加重大了.架构更复杂.应用更多,要从中快速诊断出问题.找到性能瓶颈,并不是一件容易的事.因此,也随着诞生了一系列面向Dev ...