0
0
0
1. 云栖社区>
2. 前端那些事儿>
3. 博客>
4. 正文

## 削尖轴

x轴是水平的，y轴是垂直的，z轴从屏幕内出来。z轴零点值位于屏幕的平面上。记住这个事实。

## 理清视角

``````.scene {
perspective: 800px;
}``````

`` const perspective = dimension * 4;``

## 从各方考虑

``````<div class="scene">
<div class="cube">
<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 class="side front"></div>
</div>
</div>``````

``````.cube {
position:relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
}
.side {
position: absolute;
width: 200px;
height: 200px;
}
.back {
transform: translateZ(-100px);
}
.left {
transform: translateX(-100px) rotateY(90deg);
}
.right {
transform: translateX(100px) rotateY(90deg);
}
.top {
transform: translateY(-100px) rotateX(90deg);
}
.bottom {
transform: translateY(100px) rotateX(90deg);
}
.front {
transform: translateZ(100px);
}``````

``````.cube {
transform: rotateX(42deg);
}``````

## 克服缺点

``````.back {
transform: translateZ(-100px) rotateX(180deg);
}
.bottom {
transform: translateY(100px) rotateX(270deg);
}``````

## 超越屏幕

``````.cube {
transform:translateZ(-100px);
}``````

## 使用神奇的数字

``````const offset = dimension / 2;

const offset = dimension / (2 * Math.sqrt(3));``````

## 重新开始

``````.scene {

}
.cube {
position: relative;
width: 200px;
height: 200px;
transform: perspective(800px) translateZ(-100px);
}
.side {
position: absolute;
transform-origin: 50% 50% -100px;
backface-visibility: hidden;
}``````

``````.back {
transform: perspective(800px) rotateY(180deg);
}
.top {
transform: perspective(800px) rotateX(90deg);
}
.bottom {
transform: perspective(800px) rotateX(-90deg);
}
.front {
transform: perspective(800px);
}``````

## 运用数学的力量

``````const front_offset = offset * sin(angle) * -1;
const bottom_offset = offset * cos(angle);
const back_offset = offset * sin(angle);
const top_offset = offset * cos(angle) * -1;
``````

+ 关注