web前端入门到实战：CSS实现3D效果：立方体_web正方体

首先要给3D的元素准备一个“舞台”，因为页面本身是平面的，并不能展示出3D的效果。

通过设置透视距离，就相当于把这个区域变成了一个能表现出近大远小的“3D舞台”，在其内部就可以去做3D效果了。

<div class="container">
</div>
1
2

.container {
  height: 500px;
  background: #eee;
  perspective: 500px;   /* 设置透视距离 */
}
1
2
3
4
5

舞台搭好，演员上场，在container中加入一个盒子用来做正方体。设置宽高并定位到舞台中央，添加一个边框方便看到位置，设置transform-style属性，他的作用是允许box这个盒子的子元素进行3d变换

<div class="container">
  <div class="box">
  </div>
</div>
1
2
3
4

.box {
  width: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #000;
  transform-style: preserve-3d;
}

web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
1
2
3
4
5
6
7
8
9
10
11