CSS3动画-定位元素层级覆盖问题

最新推荐文章于 2023-02-17 16:24:24 发布

Zerofishcoding

最新推荐文章于 2023-02-17 16:24:24 发布

阅读量6k

点赞数

分类专栏： html/css 文章标签： css3 动画 javascript

本文链接：https://blog.csdn.net/Zerofishcoding/article/details/78149317

版权

html/css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

       在之前写过一篇博客js-使用js生成10*10个带标号的div，关于如何使用js生成10*10的100个div。最近尝试着在这使用定位+循环生成的100个div上加上span并配合css3里的transform,相当于每一个div都是一个四个面的立方体，每一个面都是一整张背景图的一部分。但是出现了定位元素层级覆盖问题，如下图所示：
立体图片诡异现象
       从这张图片上，可以看到在这图片中心点的左侧，可以看到每个div内包含的立方体的左侧面和中心点下每个div所形成的立方体的上侧面
       原因有两个：1.因为是用定位排列的10*10个div,有定位就会有层级问题；2.默认情况下，perspective-origin的值为center center。
       从persective-originj角度入手解决，将persective-origin设置成了right bottom。理论上是一举解决了这个问题，但是在转动的时候，能够很清楚的看到左上角转动的角度不是90deg，立方体已经变形。所以不提倡修改persective-origin。
        从z-index角度入手解决，我们想要的是从最左侧到中心点，z-index递增。从中心点到最右侧，z-index递减。根据规律，可人为设置z-index。
       以下是以5个div作为找规律的示意图：
z-index规律图
       为了方便找到规律，便将每一行递增10，此时，我们可以将z-index拆分为x-index和y-index。z-index处理js代码如下所示：

for(var i = 0; i < 100; i++) {
                var x = i % 10;
                var y = parseInt(i/10);
                var xIndex = 0;
                var yIndex = 0;
                var zIndex = 0;
                xIndex=5-Math.abs(x - 5);
                yIndex=5-Math.abs(y - 5);
                zIndex = yIndex * 10 + xIndex;
                ......//样式和结构生成代码
                }