一次性弄懂CSS3 3D（perspective、transform-style、backface-visibility）

最近在空余时间翻译一些零碎的知识点教程，发现之前在收藏夹吃灰的几篇关于CSS3 3D转换的文章，觉得不错，于是便翻译成中文。

这是一个精简的关于CSS 3D转换的教程，先讲了3D的一些属性和概念，再通过4个典型案例(卡片反转、正方体、长方体、3D旋转木马)，详细讲解了如何用CSS实现3D效果。

CSS 3D教程中文翻译

• 目录
• 介绍
• 透视
• 3D transform 函数
• 卡片翻转
• 立方体
• 盒子
• 旋转木马
• 总结

CSS3D速记总结

看完后相信你一定会很快忘记，没关系，这里总结了一个速记笔记，只需记住核心几行代码即可。

第一步，先设置HTML结构。

<div class="scene">
  <div class="cube">
    <div class="cube__face cube__face--front">front</div>
    <div class="cube__face cube__face--back">back</div>
    <div class="cube__face cube__face--right">right</div>
    <div class="cube__face cube__face--left">left</div>
    <div class="cube__face cube__face--top">top</div>
    <div class="cube__face cube__face--bottom">bottom</div>
  </div>
</div>

牢记一个套路，需要三层嵌套的HTML结构，场景(.scene)、3D元素(.cube)、3D元素的多个部件(.cube__face)。

第二步，在场景上设置视角(perspective)，3D元素上设置transform-style: preserve-3d。

.scene {
  width: 200px;
  height: 200px;
  perspective: 600px;
}
 
.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}

第三步，3D部件上设置绝对定位后设置各个方向的偏移

.cube.show-front  { transform: translateZ(-100px) rotateY(   0deg); }
.cube.show-right  { transform: translateZ(-100px) rotateY( -90deg); }
.cube.show-back   { transform: translateZ(-100px) rotateY(-180deg); }
.cube.show-left   { transform: translateZ(-100px) rotateY(  90deg); }
.cube.show-top    { transform: translateZ(-100px) rotateX( -90deg); }
.cube.show-bottom { transform: translateZ(-100px) rotateX(  90deg); }
 
.cube__face {
  position: absolute;
  width: 200px;
  height: 200px;
}

以上再精简成一句话便于记忆：

爷爷设置perspective、父亲设置transform-style: preserve-3d、孩子们设置绝对定位和3D偏移。

饥人谷一直致力于培养有灵魂的编程者，打造专业有爱的国内前端技术圈子。如造梦师一般帮助近千名不甘寂寞的追梦人把编程梦变为现实，他们以饥人谷为起点，足迹遍布包括facebook、阿里巴巴、百度、网易、京东、今日头条、大众美团、饿了么、ofo在内的国内外大小企业。 了解培训课程：加微信 xiedaimala03，官网:https://jirengu.com