CSS 3D Panorama - 淘宝造物节技术剖析3D 全景并不是什么新鲜事物了，但以前我们在 Web 上看到的 3

前言

3D 全景并不是什么新鲜事物了，但以前我们在 Web 上看到的 3D 全景一般是通过 Flash 实现的。若我们能将 CSS3 transform 的相关知识运用得当，也是能实现类似的效果。换句话说，3D 全景其实就是 CSS3 3D 的应用场景之一。

准备

在实现 CSS3 3D 全景之前，我们先理清部分 CSS3 Transform 属性：

下面对上述的一些点进行更深入的分析：

对于 perspective，该属性指定了“眼睛”与元素的 perspective-origin （默认值是 50% 50%）点的距离。那么问题来了：“当我们应用 px 作为衡量单位时，那它的实际距离该如何量化呢（即如何得到我们熟悉且易于表达的距离）？”
答：当我们的屏幕的分辨率是1080P（1920*1080px），且该元素或祖先元素的perspective值是 1920px 时，该应用了CSS3 3D transform 的元素的立体效果就相当于我们在距离一个屏幕宽度（1920px）的屏幕前观看该元素的真实效果。尽管如此，目前我也不清楚如何准确地为元素设置一个合适的 perspective 值，只能猜测个大概值，然后再动态修改值，以达到满意的呈现效果。

根据相似三角形的性质可计算出被前移的元素最终在屏幕上显示的实际大小

另外，关于 perspective 还有另外一个重要的点。因为，perspective-origin的默认值是 50% 50%，因此，对哪个元素应用 perspective 属性，就决定了“眼睛”的位置（即我们的“眼睛”是在哪个角度看物体）。一般来说，当我们需要正视物体时，就会将该属性设置在与该元素中心重合的某一祖先元素上。
再另外，如果说：“如何让一个元素（的背面）不可见？”，你可能会说 backface-visibility:hidden;。其实，对于在“眼睛”背后的元素（以元素的 transform-origin 为参考点），即元素的z轴坐标值大于 perspective 的值，浏览器是不会将其渲染出来的。
对于 transform-style，该属性指定了其子元素是处于3D场景还是2D场景。对于2D场景，元素的前后位置是按照平时的渲染方式（即若在普通文档流中，是按照代码中元素的先后顺序，后面的元素会遮住在其前面的元素）；对于3D场景，元素的前后位置则按照真实世界的规则排序（即越靠近“眼睛”的，会遮住离“眼睛”更远的元素）。
另外，由于 transform-style 属性是非继承的，对于中间节点需要显式设定。
对于 transform 属性：下图整理了rotate3d、translate3d的变换方向：

transform中的变换属性的顺序是有关系的，如translateX(10px) rotate(30deg) 与 rotate(30deg) translateX(10px)是不等价的。

另外，需要注意的是 scale 中如果有负数值，则该方向会产生180度的翻转；
再另外，部分transform效果会导致元素（字体）模糊，如translate的数值存在小数、通过translateZ或scale放大元素等等。每个浏览器都有其不同的表现。

实现

上面理清了一些CSS Transform的知识点，下面就讲讲如何实现 CSS 3D全景：

想象一下，当我们站在十字路口中间，身体不动，头部旋转360°，这个过程中所看到的画面就形成了一幅以你为中心的全景图了。其实，当焦距不变时，我们就等同于站在一个圆柱体的中心。

但是，虚拟世界与现实的最大不同是：没有东西是连续的，即所有东西都是离散的。例如，你无法在屏幕上显示一个完美的圆。你只能以一个正多边形表示圆：边越多，圆就越“完美”。

同理，在三维空间，每个 3D 模型都等同于一个多面体（即 3D 模型只能由不弯曲的平面组成）。当我们讨论一个本身就是多面体（如立方体）的模型时并不足以为奇，但当我们想展示其它模型时，如球体时，就需要记住这个原理了。
三维环境的球体

淘宝造物节的活动页就是CSS 3D 全景的一个很赞的页面，它将全景图分隔成20等份，相邻的元素间差18°（360/20）。需要注意的是:我们要确保每个元素的正面是指向圆柱中心的，所以要计算好每等份的旋转角度值。然后再将元素向外（即Z轴方向）平移 r px。对于立方体 r 就是 边长/2，而对于其它更复杂的正多面体呢？

举例：对于正九面体，每个元素的宽为210px，对应的角度为40°，即如下图：
图片来自：desandro.github.io/3dtransform…
此处输入图片的描述
正九面体的俯视图

此处输入图片的描述
计算过程

由此得到一个公用函数，只需传入含有元素的宽度和元素数量的对象，即可得到 r 值：

function calTranslateZ(opts) {
  return Math.round(opts.width / (2 * Math.tan(Math.PI / opts.number)))
}
calTranlateZ({
    width: 210,
    number: 9
});  // 288

俯视时所看到的元素外移动画

另外，为了让下文易于理解，我们约定html结构是：

#view(perspective:1000px)
    #stage(transform-style:preserve-3d)
        #cube(transform-style:preserve-3d)
            .div（width:600px;height:600px;） /*组成立方体的元素*/

正多面体构建完成后，就需要将我们的“眼睛”放置在正多面体内。由于在“眼睛”后的元素是不会被浏览器所渲染的（与 .div元素 是否设置 backface-visibility:hidden;无关），且我们保证了 .div元素 的正面都指向了正多面体的中心，这就形成360°被环绕的效果了。
那“眼睛”具体是被放置在哪个位置呢？
答：通过设置 #stage 元素的translateZ的值，让不能被看到的 .div元素 的z轴坐标值大于perspective的值即可。如：立方体的正面的translateZ是-300px（为了保证立方体的正面是指向立方体中心，正面元素需要设置 rotateY(-180deg) translateZ(-300px)，即正面元素向“眼球”方向平移了300px），而#view的perspective的值为1000px，那么 #stage 的translateZ的值应该大于700px且小于1300px，具体数值则取决于你想要呈现的效果了。

根据上述知识，我粗略地模仿了“造物节”的效果：jdc.jd.com/lab/zaowu/i…

其实，只需6幅图就可以实现一张常见的无死角全景图。
我自己又试验了下：jdc.jd.com/lab/zaowu/i…

可由下图看出，将水平的4张图片合成后就是一张全景图：
此处输入图片的描述