三棱柱以及多棱柱的实现
学习所谓是从浅到深，先掌握基本的实现，再去实现多样化
首先来一个三棱柱的实现：
1、先了解三棱柱的z轴的中心怎么求，根据数学公式可是，z轴的一半=deg/2*math.pi/180 * legth/2
length = 边的一半（每条边都一样长，每个角都一样大）
内角 = 180-360/n
外角 = 360/n
所以中心线就可以求出来啦，下面给出代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--n边形的的内角和是180，外角和是360， 内角 = 180-360/n --> <style type="text/css"> *{ padding: 0; margin: 0; } #wrap{ position: absolute; left: 50%; top: 50%; width: 400px; height: 400px; margin-left: -200px; margin-top: -200px; border: 1px solid; perspective: 200px; } #wrap > .box{ width: 100px; height: 100px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /*background: pink;*/ transform-style: preserve-3d; transition: 3s; } #wrap > .box > div{ width: 100px; height: 100px; position: absolute; background: pink; text-align: center; font: 50px/100px "微软雅黑"; transform-origin: center center -28.867513459481287px; } #wrap > .box >div:nth-child(3){ transform: rotateY(120deg); } #wrap > .box >div:nth-child(2){ transform: rotateY(240deg); } #wrap:hover .box{ transform: rotateY(180deg); } </style> </head> <body> <div id="wrap"> <div class="box"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </body> </html>
效果图如下：
多棱柱其实道理是一样的，只是需要设计只能一点，不需要人工干涉太多的东西：
先上效果图吧，嘻嘻
好啦，不多说了，看了效果图是不是很好玩，那就给上代码吧：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--n边形的的内角和是180，外角和是360， 内角 = 180-360/n --> <style type="text/css"> *{ padding: 0; margin: 0; } #wrap{ position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin-left: -200px; margin-top: -200px; /*border: 1px solid;*/ /*大小也跟视觉设置有关系，越大就看着好像越大的感觉*/ perspective: 1000px; } #wrap > .box{ width: 300px; height: 300px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /*background: pink;*/ transform-style: preserve-3d; /*要设置过渡的属性是transform 要不然的话，变换基点也会跟着过渡，那就有点奇怪了*/ transition: 10s transform; } #wrap > .box > div{ width: 300px; height: 300px; position: absolute; background: pink; text-align: center; font: 50px/300px "微软雅黑"; backface-visibility: hidden; /*transform-origin: center center -28.867513459481287px;*/ } /*#wrap > .box >div:nth-child(3){ transform: rotateY(120deg); } #wrap > .box >div:nth-child(2){ transform: rotateY(240deg); } #wrap:hover .box{ transform: rotateY(180deg); }*/ #wrap:hover > .box{ transform: rotateY(360DEG); } </style> </head> <body> <div id="wrap"> <div class="box"> </div> </div> </body> <script type="text/javascript" src="../2D变换/js/jquery-1.10.1.js"></script> <script type="text/javascript"> $(function(){ createLZ(10) }) function createLZ(n){ var boxNode = $("#wrap > .box"); var styleNode = $("head>style"); //内角 var degIn = 180-360/n; var degOut = 360/n; var divHtml = ''; var styleHtml = ''; for (var i = 0; i<n;i++) { divHtml+="<div>"+(i+1)+"</div>"; styleHtml+="#wrap > .box >div:nth-child("+(i+1)+"){transform: rotateY("+(i*degOut)+"deg);}" } styleNode.append(styleHtml); boxNode.append(divHtml) var divNode = $("#wrap > .box > div"); var length = divNode.width() styleNode.append("#wrap > .box >div {transform-origin: center center -"+((length/2)*Math.tan(((degIn/2)*Math.PI)/180))+"px;}") styleNode.append("#wrap > .box {transform-origin: center center -"+((length/2)*Math.tan(((degIn/2)*Math.PI)/180))+"px;}") } </script> </html>
注意几个点辣：
1、/*大小也跟视觉设置有关系，越大就看着好像越大的感觉*/
2、/*要设置过渡的属性是transform 要不然的话，变换基点也会跟着过渡，那就有点奇怪了*/
