css3+js生成任意正多边形棱柱

求任意正多边形的内边距公式：

R：内边距
L：正多边形的边长
α：每个面的旋转角度的二分之一（旋转角度=多边形相邻的两条边长的各自的垂直平分线的交点所在的夹角）

R = L /（2*tanα）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;list-style: none;font: 50px/120px "微软雅黑";}.multiPrism{position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;width: 400px;height: 400px;perspective: 300px;}.multiPrism .prism{margin: 50px 150px;display: block;width: 100px;height: 300px;transition: 3s;transform-style: preserve-3d;}.multiPrism .prism>li{position: absolute;left: 50%;top: 50%;margin-left: -50px;margin-top: -150px;width: 100px;height: 300px;background-color: rgba(0,255,255,.3);z-index: 10;line-height: 300px;text-align: center;backface-visibility: hidden;}input[type='text']{position: absolute;top: -200px;}input[type='button']{position: absolute;top: -70px;}</style>
</head>
<body><section class="multiPrism"><ul class="prism"></ul><input type="text" placeholder="请输入棱柱面数(回车)"><input type="button" value="绕Y轴旋转360度"></section><script>let prism = document.querySelector('.prism');let inputValue = document.querySelector('input[type="text"]');let turn = document.querySelector('input[type="button"]');let flag = true;inputValue.addEventListener('change',()=>{prism.innerHTML = '';let num = inputValue.value;let lis = '';let deg = 0;let centerPoint = 0;for (let i = 0 ; i < num ; i++){deg = 360/num;centerPoint = -50/Math.tan(Math.PI*deg/360)+'px';lis +=`<li style="transform: rotateY(${deg*i}deg);transform-origin: center center ${centerPoint} ">${i+1}</li>`}prism.innerHTML = lis;prism.style.transformOrigin = `center center ${centerPoint} `;});turn.addEventListener('click',()=>{if (flag){prism.style.transform = `rotateY(-360deg)`;}else {prism.style.transform = `rotateY(0deg)`;}flag = !flag;});</script>
</body>
</html>

css3+js生成任意正多边形棱柱相关推荐

web前端：原生多棱柱/无限棱柱组件，js生成元素，随机生成旋转角度transform
1.less * {margin: 0;padding: 0;//注意防止页面下来body {height: 100%;overflow: hidden;#wrap {position: absolu ...
❤生日快乐网站模板HTML❤（精品制作）（HTML5+CSS3+JS）
生日快乐网站模板HTML(精品制作)(HTML5+CSS3+JS) 最近姐姐的生日快到了,想着也没有什么礼物送给她,恰好因为CTF的原因学了点HTML和JavaScript,就做了两个网页,当然因为网 ...
2023年最全前端面试题考点HTML5+CSS3+JS
合集:2023年最全前端面试题考点HTML5+CSS3+JS+Vue3+React18+八股文+手写+项目+笔试_参宿7的博客-CSDN博客本章内容为一面基础面为了简洁,相关文章参考链接在标题里 ...
临摹中国慕课静态网页第二周周记（CSS3+JS）
临摹中国慕课静态网页第二周周记(CSS3+JS) 第二周这周主要是对细节,轮播图,下拉菜单等地完善和JS的学习学习内容 (1)CSS word-break 属性属性规定自动换行的处理方法. 语法 ...
js生成[n,m]的随机数
一.预备知识 Math.ceil(); //向上取整. Math.floor(); //向下取整. Math.round(); //四舍五入. Math.random(); //0.0 ~ 1 ...
真的了解js生成随机数吗
由js生成一切随机数的基础都是Math.random(),这个方法比较特别,生成的随机数落在的区间是[0,1),进行一次操作的话,js只能生成一个类似于[n,m)这样,左闭右开的区间.所以当有一些特殊 ...
登录页面html5 css3 js代码,H5+css3+js搭建带验证码的登录页面
本文实例为大家分享了H5+css3+js搭建带验证码的登录页面,供大家参考,具体内容如下 login.html EasyBuy后台管理系统 .main_bar{ width:1350px; heigh ...
HTML5,CSS3,js
HTML5,CSS3,js html5 html基本结构块级标签和行级标签 html5表格 html5表单 css3 css使用方法 css常用属性 css3的过渡和变换 css3的动画属性和多列属 ...
❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备
一年一度的/520/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧! ...
利用HTML5+CSS3+JS实现简单的钟表
HTML5+CSS3+JS实现动态时钟利用HTML5+CSS3+JS实现简单的钟表,仅供参考学习效果图: 在线效果预览思路: 1. 先定义一个类名为timepiece的圆表表盘 HTML: &l ...

css3+js生成任意正多边形棱柱

css3+js生成任意正多边形棱柱相关推荐

最新文章

热门文章