css正方体实现--（transform练习）

昨天看过在看完transform后，想做一个正方体的效果。
昨天transform的笔记在这里
源码在这里可以看到

闭眼5秒钟脑子里预演了一遍大概咋写，然后就认为自己已经可以写出来了。

今天强迫自己去用手给实现一遍，结果发现
懒惰和盲目自信又一次让自己有了“这我也会”的错觉

---

第一次懵逼

第一版代码在这里---要翻墙
效果如下图

发现的问题有好多：

1. 为什么只展现出来一个面？
2. 为什么动画效果显示出来的是平面

先解决第一问题：

先要明确一点： 要实现3d效果，在transform-origin这个属性上必须要写上第三个参数。

给面3设置的是ratateY(180deg)，在确保上面这个没问题之后，可是效果看上去这个面只是进行了翻转而并没有变远。 所以这时候要考虑是不是没有开启景深的原因

于是给container加上 perspective:200px;

这时候的效果图如下：

1.gif

第一个问题解决。

再看第二个问题：

为什么动画效果显示出来的是一个平面？
这个我想到了昨天笔记里的这个效果

123

会不会也是因为在旋转container的时候，它的子元素（也就是每一个面）的3d变化都没保存所导致的。

于是我试着在container上加了 
transform-style:preserve-3d

效果图如下

1.gif

意外发现那个消失的1面（正面）也显示出来了。

---

第二次懵逼

虽然是3d效果了，可是这个效果跟想象中的有点不一样啊（简直就是完全不一样）。
想了好久，不知道问题出在了哪里。

盯着看了好久，发现一个问题： 由于加了景深的缘故，每一个面的大小貌似已经固定。

拿左侧右侧的两面来说：
预期是：效果是近大远小的梯形效果，但具体形状还是矩形。
可实际却是： 每一个面的形状已经在形成视觉效果时候便已经固定（左右两个面已经不是梯形而是矩形。）

通过上面这个发现，猜测了下css实现景深效果的一部分原理也不知道对不对：根据几何学的公式将平面的dom转换为符合视觉效果的另一种图形从而达到景深的效果。
举个例子就是矩形左右两侧，浏览器只是根据几何学把两个矩形变成了符合视觉预期的梯形，让立方体有里景深的效果。

既然有了上面这个猜测，那就试着先把容器的景深给去掉

.container{
 ---------perspective:XXX
}

效果如下

1.gif

这里有没有发现一个问题：

在一开始只有一个面3能显示出来时候，靠加景深css来让其他面展现出来，而现在却要删掉这个属性。
而删掉这个属性后，发现页面展现并没有回到上面最开始的那个样子。
看了下代码，发现是transform-style起了作用。这个css的作用本身就保留子元素（不是子孙元素）的3d变化。所以子元素的rotate符合预期没出现偏差。

---

那现在就要考虑怎么样做，才能实现符合预期的景深效果

具体咋做，我看了教程上的做法。但教程上并没有说为啥要这么做，很自然的这么写了
又一次证明 啥事还是要亲自来一遍。

既然景深会影响到子元素的transform的变换结果，那如果子元素不变换呢。

所以试着这样写：
在container的外面再包一层dom，然后景深的css属性放到这个dom上
效果图如下：

1.gif

实现真3d了，可是在旋转的时候有点怪怪的，多看几遍发现正方体的旋转点为面1的中心。而预期的效果则是围绕着正方体的中心旋转。 所以这时候可以给旋转的那个dom（也就是container）加上变换中心点的样式：

transform-origin: center center -75px;

这里要说的是 transform-origin:center center ???px 这里的px是多少呢。 自己试一试算一算，会发现 这里填成立方体的长的一半最合适。

---

最后，看效果：

1.gif

以上均是看妙味课程后的笔记。 妙味大法好！

---

作为一个跟浏览器打交道的人，应该是很烦那种PC端完美但移动端迷之bug的情况。
上面这个图是在PC上开发时候截的图，多完美，而下图是在ios上截的图。（安卓没出问题）
为啥是这样子的，很烦。很烦。

Paste_Image.png

在排查代码的时候，发现我的正面（也就是面1）没有设置rotate，因为按理说，它设置成rotate（0）和不设置在表现上是没区别的。试着给这个面也加了rotate之后，ios上的效果有所改观。

1.gif

这时候发现面1 的问题是已经解决了，可旋转的样子跟pc上的最终效果还是有很大差距。

---

那么问题到底出在了哪里以及要怎么改,会在这篇帖子里会详细解释到。