前言

第29天了，不知道再写些什么了。就再复习复习CSS 3D吧。

了解下基本的3D概念，就是二维变三维。从x,y坐标到x,yz坐标。CSS 3D采用左手坐标系

伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上。其余的手指指向前方，这样就建立了一个左手坐标系。其中，拇指、食指和其余手指分别代表x，y，z轴的正方向

以上关于WEB 3D说明来自我整理ThreeJS时的笔记： ThreeJS基础理论要点大纲

几个关键属性

• transform 用于向2D, 3D转换的各种方式，详见下表

• transform-origin 转换位置

• transform-style 指明使用2D或3D

• perspective 3D透视视距[应用在父元素上]

• perspective-origin 指定了观察者的位置[应用在父元素上]

• backface-visibility 定义元素在不面对屏幕时是否可见

transform接受的转换方法如下：

实现一个3D效果

先不管这些属性和方法，来一个简单的例子。

HTML部分：

<div class="container">
  <div class="pan"></div>
</div>

CSS 部分：

.container{
  perspective: 800px;
  .pan{
    width: 200px;
    height: 200px;
    background-color: #374d68;
    transform-style: preserve-3d;
    transform: rotateY(20deg);
  }
}

效果如图：

可以看到这是一个有透视(3D)的正方形。关键两点：

1. 父元素必须设置视距 perspective

2. 给需要实现3D效果的子元素添加转换方法，如 transform: rotateY(20deg);

理解重要的perspective

perspective指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。

听不懂吗，看图示：

一个正方体：

<div class="container">
  <div class="pan">
    <div class="side top">top</div>
    <div class="side bottom">bottom</div>
    <div class="side left">left</div>
    <div class="side right">right</div>
    <div class="side front">front</div>
    <div class="side back">back</div>
  </div>
</div>

SCSS

.container{
  perspective: 500px;
  perspective-origin: left;
  .pan{
    position: relative;
    width: 200px;
    height: 200px;
    transform: rotateX(45deg) rotateY(45deg);
    transform-style: preserve-3d;
    backface-visibility: visible;
    .side{
      width: 200px;
      height: 200px;
      background-color: #6e97c9;
      position: absolute;
      backface-visibility: visible;
      opacity: 0.6;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #fff;
      &.top{
        background-color: #6ec9a6;
        transform: translateY(-100px) rotateX(90deg);
      }
      &.bottom{
        background-color: #c9bb6e;
        transform: translateY(100px) rotateX(90deg);
      }
      &.front{
        background-color: #0eedfd;
        transform: translateZ(100px);
      }
      &.back{
        background-color: #c96ec1;
        transform: translateZ(-100px);
      }
      &.left{
        background-color: #0567a8;
        transform: translateX(-100px) rotateZ(90deg)  rotateX(90deg);
      }
      &.right{
        background-color: #e45151;
        transform: translateX(100px) rotateZ(90deg)  rotateX(90deg);
      }
    }
  }
}

效果如下：

关于perspective-origin

perspective-origin 指定了观察者的位置，用作 perspective 属性的消失点。

可以理解为我们站在物体的什么方位上云观察物体。默认为中心点。

比如站在其左侧：

perspective-origin: left;

可以看出，是我们站在物体左侧看过去的透视效果。与之相对的另一个位置属性，是被转换物体的转换原点：

被转换物体原点transform-origin

transform-origin CSS 属性让你更改一个元素变形的原点

transform-origin的默认值也是中心点，值与perspective-origin的值一样。应该不难理解。

转换的核心transform

transform 接受各种变形转换方法。是改变形态的核心属性。其所有的值已经在上面表格列出。可以使用上例中的3D 正方体进行测试体验。

其中scale、translate 、rotate都很好理解，直接体验就好。不做过多说明。我们尝试了解一下perspective(n)与matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)。

perspective(n)

透视函数定义了到 z=0 的坐标轴，使用者能够得到 3D 定位元素的透视，每个 3D 元素在 Z 轴的位置大于零意味着离使用者更近，因此会变得更大，同理当元素 Z 周小于零时会变得 更小

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

CSS 函数 matrix3d() 以 4x4 齐次矩阵的形式定义一个 3D 转换。其结果是一个 <transform-function> 数据类型

关于这个矩阵，我查了查资料，实在是为难我了，看不懂。所幸也用的不多。不研究了。

有兴趣可参阅张鑫旭的有趣解读 https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%e7%9f%a9%e9%98%b5/

最后附上一个3D盒子的DEMO辅助直观的理解学习：

demo代码： 

css3d.zip