學習所謂是從淺到深，先掌握基本的實現，再去實現多樣化
首先來一個三棱柱的實現：
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 要不然的話，變換基點也會跟着過渡，那就有點奇怪了*/