iphone上层级问题,transform 和 z-index问题

在写3d动画时导致的层级问题:

1
2
3
4
5
6
7
8
// 父元素上添加
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
perspective: 1000px;
-webkit-perspective: 1000px;

// 元素本身添加,值可自己设置
transform: translateZ(10px);

还有一种情况是动画导致的层级混乱问题:

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/*test1*/
@-webkit-keyframes test1_an {
0% {
opacity: 0;
transform: translate(0px,0px) rotateY(0deg) rotate(-70deg);
}
28% {
opacity: 1;
transform: translate(-124px,103px) rotateY(180deg) rotate(-120deg);
}
52% {
opacity: 1;
transform: translate(-234px,200px) rotateY(0deg) rotate(-25deg);
}
78% {
opacity: 1;
transform: translate(-354px,300px) rotateY(180deg) rotate(-130deg);
}
90%{
opacity: 1;
}
100% {
opacity: 0;
transform: translate(-454px,377px) rotateY(0deg) rotate(25deg);
}
}

/*test2*/
@-webkit-keyframes test1_an {
0% {
opacity: 0;
transform: translate(0px,0px) rotate(-70deg);
}
28% {
opacity: 1;
transform: translate(-124px,103px) rotate(-120deg);
}
52% {
opacity: 1;
transform: translate(-234px,200px) rotate(-25deg);
}
78% {
opacity: 1;
transform: translate(-354px,300px) rotate(-130deg);
}
90%{
opacity: 1;
}
100% {
opacity: 0;
transform: translate(-454px,377px) rotate(25deg);
}
}

我将test1改为test2,去掉了rotateY(0deg)的转变,iphone上层级问题消失。

可能还存在另一种情况,transform属性的顺序也可能导致一些问题,通常将rotate放在最后。

iphone上层级问题,transform 和 z-index问题

http://fahsa.cn/web/animation-level/

作者

Fahsa

发布于

2021-07-12

更新于

2021-07-12

许可协议

评论