生成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语言中没有度数的小句号 所以度数要转成弧度。
生成3D多棱柱的方法(3D立体图片)的更多相关文章
- Discovery直播 | 3D“模”术师,还原立体世界——探秘3D建模服务
通过多张普通的照片重建一个立体逼真的3D物体模型,曾经靠想象实现的事情,现在, 使用HMS Core 3D建模服务即可实现! 3D模型作为物品在数字世界中的孪生体,用户可以自己拍摄.建模并在终端直观感 ...
- WPF 3D 小小小小引擎 - ·WPF 3D变换应用
原文:WPF 3D 小小小小引擎 - ·WPF 3D变换应用 WPF可以提供的3D模型使我们可以轻松地创建3D实体,虽然目前来看还很有一些性能上的问题,不过对于一些简单的3D应用应该是可取的,毕竟其开 ...
- python快速生成注释文档的方法
python快速生成注释文档的方法 今天将告诉大家一个简单平时只要注意的小细节,就可以轻松生成注释文档,也可以检查我们写的类方法引用名称是否重复有问题等.一看别人专业的大牛们写的文档多牛多羡慕,不用担 ...
- sublime text 乱码生成.dump问题的解决方法
title: sublime text 乱码生成.dump问题的解决方法 tags: sublime text,sublime text 3,.dump,乱码 grammar_cjkRuby: tru ...
- C#生成二维码的方法
本文实例讲述了C#生成二维码的方法.分享给大家供大家参考.具体实现方法如下: 首先引用ThoughtWorks.QRCode.dll 具体代码如下: 复制代码 代码如下: using System; ...
- Mybatis Generator自动生成的mapper只有insert方法
– Mybatis Generator 生成的mapper只有insert方法 – 首先检查generatorConfig.xml中table项中的属性 enableSelectByPrimaryKe ...
- javascript生成对象的三种方法
/** js生成对象的三种方法*/ // 1.通过new Object,然后添加属性 示例如下: var people1 = new Object(); people1.name = 'xiaohai ...
- [转][Android][Android Studio] *.jar 与 *.aar 的生成与*.aar导入项目方法
转自:http://blog.csdn.net/qiujuer/article/details/39754517?utm_source=tuicool [Android][Android Studi ...
- php生成随机数的三种方法
php生成随机数的三种方法 如何用php生成1-10之间的不重复随机数? 例1,使用shuffle函数生成随机数. <?php$arr=range(1,10);shuffle($arr);for ...
随机推荐
- Cisco 综合配置(二)
要求: 1. PC1 属于VLAN10,PC2属于VLAN20,网关:Master Router2. VLAN10.20 的网段为:192.168.10.0/24 . 192.168.20.0/24 ...
- DRF之APIView源码简析
一. 安装djangorestframework 安装的方式有以下三种,注意,模块就叫djangorestframework. 方式一:pip3 install djangorestframework ...
- ajax原理及封装
一:AJAX 简介 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. AJAX = 异步 JavaScri ...
- elasticsearch实战(1)-单机快速部署
1. 场景描述 elasticsearch只用过,没有部署或者维护过,从头完整走一遍,记录下,原创实战,有需要的朋友参考下. 2 . 解决方案 特别说下,以前win7下安装的3台虚拟机,没有联网,因为 ...
- JSP+Servlet+C3P0+Mysql实现的苹果网上商城
项目简介 项目来源于:https://github.com/gpengDemo/Estore 本系统基于JSP+Servlet+C3P0+Mysql.涉及技术少,易于理解,适合JavaWeb初学者学习 ...
- 强化学习之六:Deep Q-Network and Beyond
本文是对Arthur Juliani在Medium平台发布的强化学习系列教程的个人中文翻译,该翻译是基于个人分享知识的目的进行的,欢迎交流!(This article is my personal t ...
- 三、【Docker笔记】Docker镜像
镜像是Docker的三大核心概念之一.Docker在运行容器之前,本地需要存有镜像,若不存在则Docker会首先尝试从默认的镜像仓库中去下载,当然我们也可以去配置自己的仓库,如此就会从我们配置的仓库中 ...
- .Net Core 跨平台开发实战-服务器缓存:本地缓存、分布式缓存、自定义缓存
.Net Core 跨平台开发实战-服务器缓存:本地缓存.分布式缓存.自定义缓存 1.概述 系统性能优化的第一步就是使用缓存!什么是缓存?缓存是一种效果,就是把数据结果存在某个介质中,下次直接重用.根 ...
- 性能优化之三:将Dottrace过程加入持续集成
之前分享过一篇如何做接口性能分析的文章,但是整个分析过程有点繁琐,需要写一个控制台程序调用被测接口,再预热.启动dottrace追踪,最后才能得到我们想要的性能分析报告.如果有办法一键生成性能分析报告 ...
- P - Sudoku Killer HDU - 1426(dfs + map统计数据)
P - Sudoku Killer HDU - 1426 自从2006年3月10日至11日的首届数独世界锦标赛以后,数独这项游戏越来越受到人们的喜爱和重视. 据说,在2008北京奥运会上,会将数独列为 ...