【CSS进阶】试试酷炫的3D视角

写这篇文章的缘由是因为看到了这个页面：

创新互联是一家专注网站建设、网络营销策划、微信小程序开发、电子商务建设、网络推广、移动互联开发、研究、服务为一体的技术型公司。公司成立十余年以来，已经为上千电动窗帘各业的企业公司提供互联网服务。现在，服务的上千客户与我们一路同行，见证我们的成长；未来，我们一起分享成功的喜悦。

糯米-未来大学 3D View 页面[1]

运用 CSS3 完成的 3D 视角，虽然有一些晕 3D，但是使人置身于其中的交互体验感觉非常棒，运用在移动端制作一些 H5 页面可谓十分博人眼球。

并且掌握原理之后制作起来也并不算废力，好好的研究了一番后将一些学习过程共享给大家。下面进入正文。

3D 效果示意

先直观感受一下上述我所说的效果的简化版本：

CodePen Demo -- 3D View[2]

这里我使用了带背景色的 Div 作为示例，我们的视角处于一个正方体中，正方体的旋转动画让我们有了 3D 的感觉。

那么原本的图长什么样呢?我们把距离拉远，一探究竟：

CodePen Demo -- 3D View 2[3]

静态图如下，是这样的：

相较于第一种效果，其实所做的只是将我们的视角推进到了正方体当中，有了一种身临其景的感觉。

而合理的运用 CSS3 所提供的一些 3D 属性，很容易就能达到上述的效果。

制作这样一个 3D 图形，我在之前的文章已经很详细的讲述了过程，感兴趣的可以戳进去看看：

【CSS3进阶】酷炫的3D旋转透视[4]

transform-style 与 perspective

再简单复述一下，主要是运用到了两个 CSS 属性：

transform-style
perspective

transform-style

要利用 CSS3 实现 3D 的效果，最主要的就是借助 transform-style 属性。

transform-style 只有两个值可以选择：

 
 
 
 
  
  
  
  // 语法： 
  
  
  
  transform-style: flat|preserve-3d; 
  
  
  
     
  
  
  
  transform-style: flat; // 默认，子元素将不保留其 3D 位置 
  
  
  
  transform-style: preserve-3d; // 子元素将保留其 3D 位置。

当父元素设置了 transform-style:preserve-3d 后，就可以对子元素进行 3D 变形操作了，3D 变形和 2D 变形一样可以，使用 transform 属性来设置，或者可以通过制定的函数或者通过三维矩阵来对元素变型操作：当我们指定一个容器的 transform-style 的属性值为 preserve-3d 时，容器的后代元素便会具有 3D 效果，这样说有点抽象，也就是当前父容器设置了 preserve-3d 值后，它的子元素就可以相对于父元素所在的平面，进行 3D 变形操作。

使用 translateX(length) 、translateY(length)、 translateZ(length) 来进行 3D 位移操作，与 2D 操作一样，对元素进行位移操作，也可以合并为 translate3d(x,y,z) 这种写法;
使用 scaleX() 、scaleY() 、scaleY() 来进行3D 缩放操作，也可以合并为 scale3d(number,number,number) 这种写法;
使用 rotateX(angle) 、rotateY(angle) 、rotateZ(angle) 来进行 3D 旋转操作，也可以合并为 rotate3d(Xangle,Yangle,Zangle) 这种写法。

perspective

perspective 的语法如下：

 
 
 
 
  
  
  
  { 
  
  
  
      perspective: number|none; 
  
  
  
  }

简单来说，当元素没有设置 perspective 时，也就是当 perspective:none/0 时所有后代元素被压缩在同一个二维平面上，不存在景深的效果。perspective 为一个元素设置三维透视的距离，仅作用于元素的后代，而不是其元素本身。

而如果设置 perspective 后，将会看到三维的效果。

我们上面之所以能够在正方体外围看到正方体，以及深入正方体内，都是因为 perspective 这个属性。它让我们能够选择推进视角，还是远离视角，因此便有了 3D 的感觉。

3D View 页面的布局结构

为了完成这样一个效果，需要一个灵活的布局，去控制整个 3D 效果的展示。

下面是我觉得比较好的一种方式：

// Sass 的写法
$imgCount : 20 !default;
@for $i from 1 through $imgCount {
.img-bg#{$i}{
background-position:($i * -174px + 174px) 0;
transform: rotateY($i * 18deg) translateZ(543px);
}
}

【CSS进阶】试试酷炫的3D视角

3D 效果示意

transform-style

perspective

3D View 页面的布局结构

图片拼接

图片分割

控制 control 层，进入到圆柱画面内

最后

参考资料