# 透过3D立方体深入理解perspective和translateZ的关系

### 准备工作

rotate 旋转

translate 定义 2D 转换

translateZ 定义 3D 转换

perspective 为 3D 转换元素定义透视视图。

transform-style: preserve-3d; 指定子元素定位在三维空间内。另外，该属性是非继承的。

demo链接在这里

### 制作立方体

#### 一、制作6个面

``````<!DOCTYPE html>
<html lang="zh">

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>立方体全景</title>
<style>
* {
margin: 0;
}

html,
body {
height: 100%;
overflow: hidden;
}

.stage {
width: 800px;
height: 800px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.face {
width: 800px;
height: 800px;
}

.top {
background: green;
}

.bottom {
background: yellow;
}

.after {
background: red;
}

.left {
background: black;
}

.right {
background: blue;
}

.first {
background: blueviolet;
}
</style>

<body>
<div class='stage'>
<div class='ctx'>
<div class='facelist'>
<div class='face top'>1</div>
<div class='face bottom'>2</div>
<div class='face after'>3</div>
<div class='face left'>4</div>
<div class='face right'>5</div>
<div class='face first'>6</div>
</div>
</div>
</div>

<script>

</script>
</body>

</html>

#### 二、组合

##### 1. 把它们旋转到对应的角度
``````比如：

.top的面我们将它绕X轴旋转90度；

.left的面我们将它绕Y轴旋转90度；

···

``````<!DOCTYPE html>
<html lang="zh">

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>立方体全景</title>
<style>
* {
margin: 0;
}

html,
body {
height: 100%;
overflow: hidden;
}

.stage {
width: 800px;
height: 800px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.face {
width: 800px;
height: 800px;
position: absolute;
}

.top {
background: green;
transform: rotateX(90deg);
}

.bottom {
background: yellow;
transform: rotateX(90deg);
}

.after {
background: red;
transform: rotateX(0deg);
}

.left {
background: black;
transform: rotateY(90deg);
}

.right {
background: blue;
transform: rotateY(90deg);
}

.first {
background: blueviolet;
transform: rotateY(0deg);
}
</style>

<body>
<div class='stage'>
<div class='ctx'>
<div class='facelist'>
<div class='face top'>1</div>
<div class='face bottom'>2</div>
<div class='face after'>3</div>
<div class='face left'>4</div>
<div class='face right'>5</div>
<div class='face first'>6</div>
</div>
</div>
</div>

<script>

</script>
</body>

</html>

##### 2. 将他们按照对应的边长通过translateZ推开
``````由于我们这里是立方体，所以直接就是正方形的边长  在这里也就是±400px

``````<!DOCTYPE html>
<html lang="zh">

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>立方体全景</title>
<style>
* {
margin: 0;
}

html,
body {
height: 100%;
overflow: hidden;
}

.stage {
width: 800px;
height: 800px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.face {
width: 800px;
height: 800px;
position: absolute;
}

.top {
background: green;
transform: rotateX(90deg) translateZ(400px);
}

.bottom {
background: yellow;
transform: rotateX(90deg) translateZ(-400px);
}

.after {
background: red;
transform: rotateX(0deg) translateZ(-400px);
}

.left {
background: black;
transform: rotateY(90deg) translateZ(-400px);
}

.right {
background: blue;
transform: rotateY(90deg) translateZ(400px);
}

.first {
background: blueviolet;
transform: rotateY(0deg) translateZ(400px);
}
</style>

<body>
<div class='stage'>
<div class='ctx'>
<div class='facelist'>
<div class='face top'>1</div>
<div class='face bottom'>2</div>
<div class='face after'>3</div>
<div class='face left'>4</div>
<div class='face right'>5</div>
<div class='face first'>6</div>
</div>
</div>
</div>

<script>

</script>
</body>

</html>

##### 3. 加上3D效果

``````···
.ctx {
/* 3d视角 */
transform-style: preserve-3d;
}
···

##### 4.将我们的视角推到中心点

``````  .stage {
width: 800px;
height: 800px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 从何处（哪里）查看一个元素的角度 */
/* 从当前视角到对应面的距离  在这里是 stage到ctx的距离 */
perspective: 400px;
/* 调整角度 */
/* perspective-origin: 50% 100%; */
}

.ctx {
/* 3d视角 */
transform-style: preserve-3d;

/* 把视角推到中心 */
transform: translateZ(400px) rotateY(0deg);
}

### 单独讲解perspective和translateZ

• perspective是指 从当前视角到所看平面的距离
• translateZ指的是 从所看平面到推进视角之间的距离，大白话就是从当前距离 把你看的拉进或者拉远的距离
• 人的视角在3D投影效果中是 近大远小