web前端：原生多棱柱/无限棱柱组件，js生成元素，随机生成旋转角度transform

1.less

* {
    margin: 0;
    padding: 0;
    //注意防止页面下来
    body {
        height: 100%;
        overflow: hidden;
        #wrap {
            position: absolute;
            width: 600px;
            height: 600px;
            background: url(../img/my-logo-2.png) repeat;
            background-size: 50px;
            border: 1px solid;
            border-radius: 50%;
            box-shadow: 2px 2px 5px #00CED1;
            top: 50%;
            left: 50%;
            margin-top: -300px;
            margin-left: -300px;
            perspective: 100px;
            //随机旋转角度
//          &:hover #n-prism {
//              transform: rotateY(270deg);
//          }
            #n-prism {
                position: absolute;
                width: 150px;
                height: 150px;
                top: 50%;
                left: 50%;
                margin-top: -75px;
                margin-left: -75px;
                //开启3D
                transform-style: preserve-3d;
                //避免基点也加入过渡
                transition: 1s transform;
                //更新基点TODO:js生成-》transform-origin: center center tan内角*150px(邻边)
                div {
                    position: absolute;
                    width: 150px;
                    height: 150px;
                    border: 2px solid white;
                    background: tomato;
                    font: 30px/150px "微软雅黑";
                    color: white;
                    font-weight: bold;
                    text-align: center;
                    top: 50%;
                    left: 50%;
                    margin-top: -75px;
                    margin-left: -75px;
                    //背面隐藏
                    backface-visibility: hidden;
                    //自动生成：&:nth-child(1) {transform: rotateY(240deg);}
                }
            }
        }
    }
}

2.css

* {
  margin: 0;
  padding: 0;
}
* body {
  height: 100%;
  overflow: hidden;
}
* body #wrap {
  position: absolute;
  width: 600px;
  height: 600px;
  background: url(../img/my-logo-2.png) repeat;
  background-size: 50px;
  border: 1px solid;
  border-radius: 50%;
  box-shadow: 2px 2px 5px #00CED1;
  top: 50%;
  left: 50%;
  margin-top: -300px;
  margin-left: -300px;
  perspective: 100px;
}
* body #wrap #n-prism {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  margin-left: -75px;
  transform-style: preserve-3d;
  transition: 1s transform;
}
* body #wrap #n-prism div {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 2px solid white;
  background: tomato;
  font: 30px/150px "微软雅黑";
  color: white;
  font-weight: bold;
  text-align: center;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  margin-left: -75px;
  backface-visibility: hidden;
}

3.js

/**
 * 多棱柱脚本
 */
window.onload = function() {
	createPrism(101);
	//传入的棱数：n
	function createPrism(n) {

		//动态调整旋转
		//&:hover #n-prism {
        //        transform: rotateY(270deg);
        //    }
		var wrapStyle=document.createElement("style");
		var wrapStyleCss="#wrap:hover #n-prism{ transform:rotateY("+(Math.random()*100)+"deg);}"
		wrapStyle.innerHTML=wrapStyleCss;
		document.head.appendChild(wrapStyle);


		//N边形的外角（单个）：360°/n
		var outerDeg = 360 / n;
		//N边形的内角（单个）：180°-360°/n
		var innerDeg = 180 - 360 / n;
		//获取节点
		var prismNode = document.querySelector("#wrap > #n-prism");
		//空div标签
		var prismDiv = "";
		//生成style样式
		var prismStyle = document.createElement("style");
		//空样式集合
		var prismCss = "";
		//获取:边长-棱长width
		//这的n-prism变化存在联动，需要获取到div的width
		//var prismLength=prismNode.offsetWidth;
		for(var i = 0; i < n; i++) {
			prismDiv += "<div>" + (i + 1) + "</div>";
			prismCss += "#wrap > #n-prism > div:nth-child(" +
				(i + 1) +
				"){transform:rotateY(" +
				(i * outerDeg) + "deg);}";
		}

		//写入页面标签
		prismNode.innerHTML = prismDiv;
		//这的n-prism变化存在联动，需要获取到div的width
		//var prismLength=prismNode.offsetWidth;
		var divWidth = document.querySelector("#wrap > #n-prism > div");
		var prismLength = divWidth.offsetWidth;

		//加入基点的更新#n-prism 和 div --》 transform-origin: center center -86.60254037844386px;
		//正切定理：tan30°=对边/（邻边）150px
		//对边=150px*tan30°=150*Math.tan(30*Math.PI/180) 这里的30为角度需要转弧度：角度*Math.PI/180
		prismCss += "#wrap > #n-prism{transform-origin:center center -" + (prismLength / 2 * Math.tan((innerDeg / 2) * Math.PI / 180)) + "px;}";
		prismCss += "#wrap > #n-prism > div{transform-origin:center center -" + (prismLength / 2 * Math.tan((innerDeg / 2) * Math.PI / 180)) + "px;}"

		//写入style
		prismStyle.innerHTML = prismCss;
		//写入div样式
		document.head.appendChild(prismStyle);
	}
}

4.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>N棱柱module</title>
	</head>
	<body>
		<div id="wrap">
			<div id="n-prism">
				cevent
			</div>
		</div>
	</body>
	<link rel="stylesheet" href="css/less032.css" />
	<script type="text/javascript" src="js/less032.js"></script>
</html>

5.效果图