昨天看过在看完transform后，想做一个正方体的效果。
昨天transform的笔记在这里
源码在这里可以看到
闭眼5秒钟脑子里预演了一遍大概咋写，然后就认为自己已经可以写出来了。
今天强迫自己去用手给实现一遍，结果发现
懒惰和盲目自信又一次让自己有了“这我也会”的错觉
第一次懵逼
第一版代码在这里---要翻墙
效果如下图
发现的问题有好多：
- 为什么只展现出来一个面？
- 为什么动画效果显示出来的是平面
先解决第一问题：
先要明确一点： 要实现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上的最终效果还是有很大差距。
网友评论