求任意正多边形的内边距公式:
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>