css全景的实现

之前讲了css3的立方体实现，同时又讲了backface-vibility属性。这时候这俩结合，可以做一个很好玩的东西。

这里先看下最终要实现的效果：
效果，代码 在这里

1.gif
先说原理：

1. 把立方体的每个对应面的位置进行对调（比如面1放到了后面，面3放到了前面）。
2. 对调后当前位置的面与对调前那个面的角度刚好相反（比如对调后的面3现在在前面，但它还是反面）
3. 给每个面设置backface-visibility属性 从而达到视角被包围住的感觉。

---

先把每个面的位置进行对调。
先对面1和面3进行改造：

面1原本的css
.slide1{
        transform:rotateY(0deg) translateZ(150px);
        -webkit-transform:rotateY(0deg) translateZ(150px);
        background: green;
    }
修改后：
.slide1{
        transform:rotateY(0deg) translateZ(-150px);
        -webkit-transform:rotateY(0deg) translateZ(-150px);
        background: green;
   }

这时候的页面效果：（为了排除面3的干扰，已经把面3进行了隐藏）

1.gif

接下来对面3也进行类似的操作

面3原本的css
 .slide3{
        transform: rotateY(180deg) translateZ(150px);
        -webkit-transform: rotateY(180deg) translateZ(150px);
        background: #00A2E8;
    }
修改后：
 .slide3{
        transform: rotateY(180deg) translateZ(-150px);
        -webkit-transform: rotateY(180deg) translateZ(-150px);
        background: #00A2E8;
    }

这时候的效果（也是为了消除影响，把面1进行了注释）

1.gif
对其他面都进行这样的改造。可以看下最终的效果图：
1.gif
改造完毕，现在给每个面加上backface-visibility可以看下效果：
1.gif
这时候是不是对那种全景的感觉还不如出很明显。接下来要做的事情，就是把这个立方体扩大到整屏。

---

这里有问题了

我把立方体的大小设置了足够大（1000px）,可是在页面上发现大小生效的不符合预期，而且位置还有所偏离。下图这样

Paste_Image.png

那么问什么会出现这个问题以及该怎么解决呢。是因为我没有给立方体设置居中（这不尴尬了）。

---

居中之后，剩下的事情，就是拉近视角了,也就是translateZ

这时候本来是要给立方体的父级加tranlateZ 可是景深如果跟translateZ在一个层级或者同一个dom上的时候，景深是没有效果的，也就是表现出来的样子是translateZ直接无效。 所以这时候要给立方体外面再去加一个dom 专门去做拉伸视角的事情。

---

我新增了dom，这时候有发现了问题,为啥这个dom的高度会不受控制呢

（即不是100vh，写100%也是无效的）

Paste_Image.png

排查了好久，发现了问题：

里面的dom有个数值很高的margin-top， 这个margin-top对父级造成了这个影响。

一开始想了两个办法：

1. 不用margin-top，而是通过flex布局来对立方体进行居中。
2. 给父级设置top bottom left right

这时候又发现了一个新坑。

flex布局下 div本身大小就发生了变化，且这个用flex的其他属性调 是没法调成预期的样子，无奈只能用第二种办法。

Paste_Image.png

修改好后，下图是这个阶段的图，符合预期。

Paste_Image.png

---

这时候就要进行视角的拉伸了，这个好做。
给立方体的附近设置translateZ
在给设置了translateZ translate-style之后突然发现东西咋都不见了

Paste_Image.png
其实这时候东西是都在的。只是被这个紫色的背景色给盖住了。

这里有点跟想象中的有点不一样，按理说子节点应该在父节点上层而不是下层。
可是我在这里给子节点不管是设置z-index(明知道没用）和translateZ，都没办法把子节点给挪到上层。
这个真不知道是为什么- -

Paste_Image.png

---

这时候把这个紫色背景色给去掉，然后把这个节点的translateZ给提升transform: translateZ(1200px);。
会是这样子的效果：

1.gif
这时候还会感觉没有那种全景的效果，我在做这个东西的时候也是这么感觉的。可是一旦我把背景图给放上去之后，那效果我是很满意的，美滋滋。~
效果在这里
其实仔细看这个全景的话 还是有些小问题和可以优化的地方的，这个等日后开贴再说~