生成多邊菱形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
}
#wrap {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
#wrap>.box {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
transition: 10s transform;
transform-style: preserve-3d;
}
#wrap>.box>div {
position: absolute;
background: pink;
text-align: center;
font: 50px/300px "微軟雅黑";
backface-visibility: hidden;
}
#wrap:hover>.box {
transform: rotateY(360DEG);
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
</div>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
createLZ(10, 300, 300);
}
function createLZ(n, width, height) {
var boxNode = document.querySelector("#wrap > .box");
var stlyleNode = document.createElement("style");
var degOut = 360 / n;
var degIn = 180 - 360 / n;
var text = "";
var cssText = "";
for (var i = 0; i < n; i++) {
text += "<div>" + (i + 1) + "</div>";
cssText += "#wrap > .box > div:nth-child(" + (i + 1) + "){transform: rotateY(" + (i * degOut) + "deg);}";
}
boxNode.innerHTML = text;
var mianNode = document.querySelector("#wrap > .box > div");
cssText += `#wrap > .box{
transform-origin: center center -${( (width/ 2 )* Math.tan((degIn / 2) * Math.PI / 180)) }px;
width:${width}px;
height:${height}px;
}`;
cssText += `#wrap > .box > div{
transform-origin: center center -${( width / 2 )* Math.tan((degIn / 2) * Math.PI / 180)}px;
width:${width}px;
height:${height}px;
}`;
cssText += `#wrap{
perspective: ${width}px;
}`;
stlyleNode.innerHTML = cssText;
document.head.appendChild(stlyleNode);
}
</script>
</html>
![在這裏插入圖片描述]()
