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

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

// 父元素上添加
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
perspective: 1000px;
-webkit-perspective: 1000px;

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

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

例如：

/*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放在最后。