html实现正方体原理,css正方体实现--（transform练习）

昨天看过在看完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上的最终效果还是有很大差距。