先上一个效果图

主要运用的技术点就是

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

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. CVE-2013-4710 WebView addJavascriptInterface远程执行代码

    WebView是Android平台下的一个重要组件,通常用来在Activity中嵌入一个简单的浏览器,实现在线网页浏览的功能.比如下面代码实现访问Google页面: WebView webView = ...

  2. 单例模式和配置admin

    单例模式和配置admin   单例模式的概念 单例模式主要目的是确保某一个类只有一个实例存在.比如,某个服务器程序的配置信息存放在一个文件中,客户端通过一个 AppConfig 的类来读取配置文件的信 ...

  3. (一)iview的校验TypeError: Cannot read property 'validateField' of undefined"

    一.问题描述 我是在自己封装了一个地址级联选择,然后想要每次改变了其中数据的时候,就进行一次单独校验,所以用到了iview对部分表单字段进行校验的方法validateField.其实一开始使用的时候是 ...

  4. Linux系统c语言开发环境

    项目 内容 这个作业属于哪个课程 班级地址 这个作业要求在哪里 作业要求地址 学号-姓名 17041506-张政 学习目标 Linux系统下C语言开发环境搭建,学习Linux系统环境C语言开发过程 L ...

  5. ubuntu 如何在命令行打开当前目录

    nautilus /var 打开var文件夹

  6. HashMap中使用自定义类作为Key时,为何要重写HashCode和Equals方法

    之前一直不是很理解为什么要重写HashCode和Equals方法,才只能作为键值存储在HashMap中.通过下文,可以一探究竟. 首先,如果我们直接用以下的Person类作为键,存入HashMap中, ...

  7. SringBoot整合velocity及常用语法

    项目地址:https://github.com/chywx/springboot-velocity 背景 由于公司业务面向的是非洲市场 那边有些国家智能机并未普及,像乌干达地区还是以功能机为主 为了支 ...

  8. Sqli-labs Less-58 报错注入 5次机会

    执行sql语句后,并没有返回数据库当中的数据,所以我们这里不能使用union联合注入,这里使用报错注入.但是需要注意这里只有5次机会尝试. 找表名 http://127.0.0.1/sql/Less- ...

  9. 一文教会你如何在 Spring 中进行集成测试,太赞了

    不得不说,测试真的是太重要了!但并不是所有的开发者都这样认为,这种感觉在我回到洛阳后尤其强烈.竟然有团队成员不经测试就把代码提交到代码库,并且是会报错的那种,我天呐,遇到这种队友我也是醉了. 我之前是 ...

  10. Three中的动画实现-[three.js]

    Table Of Content 动画原理 js中动画实现原理setInterval js中动画实现新方法requestAnimationFrame 一个示例 动画原理 动画的本质实际上就是快速地不断 ...