学习所谓是从浅到深，先掌握基本的实现，再去实现多样化
首先来一个三棱柱的实现：
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>
<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>1div>
<div>2div>
<div>3div>
div>
div>
body>
html>
效果图如下：
多棱柱其实道理是一样的，只是需要设计只能一点，不需要人工干涉太多的东西：
先上效果图吧，嘻嘻
好啦，不多说了，看了效果图是不是很好玩，那就给上代码吧：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<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+=""+(i+1)+"";
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 要不然的话，变换基点也会跟着过渡，那就有点奇怪了*/