3d转换-正方体-Html5Css3-遁地龙卷风
(-1) 写在前面
我用的是chrome49，这个案例是从网上看到的，向这位同行致敬，建议大家在记录自己学习感悟时，向我一样加上笔名，被转载的时候还能留下点东西。
在研究slice-box.js的时候发觉自己需要3D转换的知识，了解之后感觉还是差点。
话说还没碰到一次web前端的面试，想当个实习生也不容易。一天又过去了啊!
(0)案例演示
(1)知识储备
a. perspective: 800px;
相当于镜头与被拍摄物体之间的距离，近大远小。
b. transform-style: preserve-3d;
这个值能让我们看到3d转换，默认值是flat只能看到平面的。
c.x、y、z轴
左手竖直代表y轴，右手水平代表x轴，z轴是即垂直x轴也垂直y轴的平行于地面的直线。
d. x、y、z轴的顺时针旋转
z轴的顺时针旋转等同于时钟秒针的顺时针旋转，我们拿食指沿着Z轴负方向模仿(指向屏幕方向)，只要改变沿着坐标轴方向(x轴负方向指向左面，y轴负方向指向上面)，就能体会其他两个轴的顺时针旋转了。
(2)代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>为了生活</title>
<style type="text/css">
.stage
{
perspective: 800px;
}
.container
{
width: 150px;
height:150px;
margin: 200px auto;
position: relative;
transform-style: preserve-3d;
height:200px;
transition:1s;
}
.container .side
{
position: absolute;
width: 150px;
height: 150px;
border:1px solid #0033FF;
text-align: center;
line-height: 150px;
}
.left
{
left:-152px;
transform: translateZ(-75px) rotateY(90deg);
transform-origin: right;
background:pink;
}
.right
{
left:152px;
transform: translateZ(-75px) rotateY(-90deg);
transform-origin: left;
background: black;
background-size:100% 100%;
}
.top
{
top:-152px;
transform: translateZ(-75px) rotateX(-90deg);
transform-origin: bottom;
background:green;
background-size:100% 100%;
}
.bottom
{
top:152px;
transform:translateZ(-75px) rotateX(90deg);
transform-origin: top;
background:blue;
background-size:100% 100%;
}
.back
{
transform:translateZ(-75px);
background:orange;
background-size:100% 100%;
}
.front
{
transform:translateZ(75px);
background:red;
background-size:100% 100%;
}
.container:hover
{
transform: rotateY(360deg);
}
</style>
</head>
<body>
<div class="stage">
<div class="container">
<div class="side front">前</div>
<div class="side back">后</div>
<div class="side left">左</div>
<div class="side right">右</div>
<div class="side top">上</div>
<div class="side bottom">下</div>
</div>
</div>
</body>
</html>
(3)如何构建一个立体正方形
六个面的方块是重叠在一起的, 注意使用left等属性进行移动和使用translateX等属性进行移动有等价的时候也有不等价的时候，取决于tansform-origin属性。
front在z轴向前移动了75px;back在z轴向后移动75px.
left，使用left属性向左移动152px，沿着z轴向后移动75px，已transform-origin: right center 0为变换点沿y轴旋转的90deg，right ，沿着z轴向后移动75px，使用left属性向右移动152px，已transform-origin: left center 0为变换点沿着y轴旋转-90deg，
top使用top属性向上移动152px，沿着z轴向前移动75px，已transform-origin: center bottom 0;为变换点沿着x轴旋转-90deg，bottom使用bottom属性向下移动152px，已transform-origin: center top 0;为变换点沿着x轴方向旋转90deg。
至此一个立方体搭建好了。
(4)如何看到立体旋转的效果
transition:1s;这个属性是放在六个面的父元素container上，这种思想还应用在布局与控制上，我们旋转的是container，旋转的变换点也在这个平面，默认是transform:center center 0px;因为构建正方体方式的原因，y轴正好位于前后的中间，左右的中间！
(5)疑惑
a. perspective: 800px;
放在container会看到另外一种效果，我猜想是因为定位点变成container，那么在container前面的就会放大，后面就被缩小，从而导致其他几面的变化。可当后面旋转到前面时，后面的大小怎么不变换，哪位同行知道麻烦解答下
b.构建立体正方形还可以使用如下方式
.left{left:-152px;transform: rotateY(90deg);transform-origin: right;}
.right{left:152px;transform: rotateY(-90deg);transform-origin: left;}
.top{top:-152px;transform: rotateX(-90deg);transform-origin: bottom;}
.bottom{top:152px;transform: rotateX(90deg);transform-origin: top;}
.front{transform: translateZ(152px);z-index:2;}
.back{z-index:1;}
设置背景颜色后沿着X轴旋转，旋转到底部的会看到其他面都是底部的颜色，哪位同行知道麻烦解答下。