3d转换-正方体-Html5Css3-遁地龙卷风 - 遁地龙卷风_H5之家

(-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>

<head>

.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>

</div>

</body>

</html>

(3)如何构建一个立体正方形

六个面的方块是重叠在一起的, 注意使用left等属性进行移动和使用translateX等属性进行移动有等价的时候也有不等价的时候，取决于tansform-origin属性。

front在z轴向前移动了75px;back在z轴向后移动75px.