在上一篇帖子里实现了一个立方体的效果,点这里可以看到。
源码在这里可以看到
可是在最后发现ios下的效果不符合预期。这篇就是解决这个问题的记录帖。
问题原因:
ios下 transform的变化原点会有兼容问题。具体表现为
两个方面。
- ios上会把dom进行放大。
左边是有transform-origin样式，右边是把这个样式给注释掉的样子。可以发现，右边的大小其实比左边的看起来要小
Paste_Image.png
--
解决办法：
通过translate位移 不会改变变换原点 这个特性。 在变换的时候对dom进行translateZ操作，其次再进行rotateZ 即可解决这个问题。
所以给每个面的变换都加了translateZ
可是又发现了新问题，就是效果更不符合预期了。
Paste_Image.png
这时候会发现中间有个黑色的框，那个其实是这个立方体的容器。
仔细观察效果发现貌似每个面距离中心点的距离貌似翻倍。
回到代码里，好好想了下，如果有translateZ来移动到中心点的距离的话，那transform-origin里的那个变换z轴原点则是多余的。
试着将transform-origin改为两个参数（center center ），在pc， ios上均符合了效果。
1.gif
回头看下之前的效果：
1.gif
有个细节给忘掉了。
上面这个解决办法是通过translateZ将dom往前移动，由于近大远小的缘故，所以需要在父级对这个容器进行tranlateZ向后移动以弥补之前的向前移动。
1.gif
在补上面的这个细节的时候发现了另外两个细节
1.要牢记住transform里的执行顺序 是先写的后执行。
- 在style里的transform样式要和js里修改的transform格式要完全一致，不然会出现 js 加的transfrom无效。
css里：
transform:translateZ(-75px) rotateY(0deg);
css里写成：transform:translateZ(-75px)； js执行无效；
写成：transform:rotateY(0deg) translateZ(-75px); js执行无效；
---
js里：
this.style.WebkitTransform = this.style.transform = 'translateZ(-75px) rotateY(360deg)'
