先上一个效果图

主要运用的技术点就是

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

3D变换  transform: rotateY(-360deg);

景深  perspective

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

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>生成任意棱柱的方法</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         #wrap{
  12.             position: relative;
  13.             height: 600px;
  14.             width: 600px;
  15.             border: 1px solid;
  16.             margin: 20px auto;
  17.             perspective: 900px;
  18.         }
  19.         #main{
  20.             position: absolute;
  21.             height: 400px;
  22.             width: 200px;
  23.             /*border: 1px solid;*/
  24.             left: 0;
  25.             right: 0;
  26.             bottom: 0;
  27.             top: 0;
  28.             margin: auto;
  29.             transform-style: preserve-3d;
  30.             transition: 6s transform;
  31.         }
  32.         .div{
  33.             position: absolute;
  34.             height: 400px;
  35.             width: 200px;
  36.             /*border: 1px solid;*/
  37.             background-color: #1c86e5;
  38.             text-align: center;
  39.             font-size: 30px;
  40.             line-height: 400px;
  41.         }
  42.         #wrap:hover #main{
  43.             transform: rotateY(-360deg);
  44.         }
  45.     </style>
  46. </head>
  47. <body>
  48.     <div id="wrap">
  49.         <div id="main"></div>
  50.     </div>
  51. <script>
  52.     window.onload=function () {
  53.         let boxNode=document.getElementById('main');
  54.         addLZ(8)
  55.         function addLZ(n) {
  56.             let deg=Math.tan((((180*(n-2))/n)/2)*(Math.PI/180));
  57.  
  58.             let nodeStr=''
  59.             for (let i=0;i<n;i++){
  60.                 nodeStr+=`<div class="div"></div>`;
  61.             }
  62.             boxNode.innerHTML=nodeStr;
  63.             let divNode=document.getElementsByClassName('div');
  64.             let width= parseFloat(window.getComputedStyle(divNode[0]).width);
  65.             let lenth=-(parseFloat(width/2)*deg);
  66.             let spend=360/n
  67.             boxNode.style.transformOrigin='center center'+' '+lenth+'px';
  68.             for (let i=0;i<n;i++){
  69.                 divNode[i].style.transformOrigin='center center'+' '+lenth+'px';
  70.                 divNode[i].style.transform=`rotateY(${i*spend}deg)`;
  71.                 divNode[i].style.backgroundSize='100% 100%'
  72.                 divNode[i].style.backgroundImage=`url(img/仁煌${i+1}.jpg)`;
  73.             }
  74.  
  75.         }
  76.     }
  77. </script>
  78. </body>
  79. </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. 发布一个npm包（webpack loader）

    发布一个npm包,webpack loader: reverse-color-loader,实现颜色反转. 初始化项目 mkdir reverse-color-loader cd ./reverse- ...

  2. 使用 Docker 部署 Spring Boot 项目

    Docker 介绍 Docker 属于 Linux 容器的一种封装,提供简单易用的容器使用接口.它是目前最流行的 Linux 容器解决方案. Docker 将应用程序与该程序的依赖,打包在一个文件里面 ...

  3. A Systems-Level Characterization of the Differentiation of Human Embryonic Stem Cells into Mesenchymal Stem Cells （解读人：王欣然）

    文献名:A Systems-Level Characterization of the Differentiation of Human Embryonic Stem Cells into Mesen ...

  4. 曹工说Spring Boot源码（24）-- Spring注解扫描的瑞士军刀，asm技术实战（上）

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  5. Error: java.net.ConnectException: Call From tuge1/192.168.40.100 to tuge2:8032 failed on connection exception

    先看解决方案,再看唠嗑,唠嗑可以忽略. 解决方案: 使用start yarn.sh启动yarn就可以了. 唠嗑: 今天学习Spark基于Yarn部署.然后总以为Yarn是让Spark启动的,提交程序的 ...

  6. LocalStorage与SessionStorage

    localStorage与sessionStorage 每日更新前端基础,如果觉得不错,点个star吧

  7. 进制-Adding Two Negabinary Numbers

    2020-02-20 14:52:41 问题描述: 问题求解: 最开始的想法是将两个数字先转化成自然数在求和,最后转化回去,但是实际上这种方案是不可取的,主要的问题就是会爆掉. 那么就得按位进行运算了 ...

  8. 概率-拒绝采样 Rejection Sampling

    2018-12-09 16:40:30 一.使用Rand7()来生成Rand10() 问题描述: 问题求解: 这个问题字节跳动算法岗面试有问到类似的,有rand6,求rand8,我想了好久,最后给了一 ...

  9. Java并发包下锁学习第一篇:介绍及学习安排

    Java并发包下锁学习第一篇:介绍及学习安排 在Java并发编程中,实现锁的方式有两种,分别是:可以使用同步锁(synchronized关键字的锁),还有lock接口下的锁.从今天起,凯哥将带领大家一 ...

  10. Idea无法调出搜狗等中文输入法

    在用户目录下的文件.xprofile 中添加一下内容 export GTK_IM_MODULE=fcitx export QT_IM_MODULE=fcitx export XMODIFIERS=“@ ...