Почему Transform-style: preserve-3d break z-zindex?
Я экспериментирую с CSS 3d-эффектами. Моя цель - создать трехмерное анимированное письмо. Как только я добавляю transform-style: preserve-3d к #F_cnt, div появляются в неправильных слоях. Z-индекс не имеет никакого эффекта. Когда я удаляю transform-style: preserve-3d, он работает нормально. Пожалуйста, помогите мне! Спасибо!
#F1 {
width: 5rem;
height: 25rem;
background: blue;
position: absolute;
transform: translateZ(5rem);
}
#F2 {
width: 10rem;
height: 5rem;
background: blue;
position: absolute;
left: 5rem;
top: 0;
transform: translateZ(5rem);
}
#F3 {
width: 5rem;
height: 5rem;
background: blue;
position: absolute;
transform: translateZ(5rem);
left: 5rem;
top: 10rem;
}
#Fb1 {
width: 5rem;
height: 25rem;
background: yellow;
position: absolute;
transform: translate3d(2.5rem, -2.5rem, 4.99rem);
}
#Fb2 {
width: 10rem;
height: 5rem;
background: yellow;
position: absolute;
left: 5rem;
top: 0;
transform: translate3d(2.5rem, -2.5rem, 4.99rem)
}
#Fb3 {
width: 5rem;
height: 5rem;
background: yellow;
position: absolute;
left: 5rem;
top: 10rem;
transform: translate3d(2.5rem, -2.5rem, 4.99rem)
}
#Ftop_1 {
width: 15rem;
height: 5rem;
background: green;
position: absolute;
bottom: 0;
transform-origin: left bottom;
transform: rotateX(60deg) skewX(-27deg) translateZ(5rem);
}
#Ftop_2 {
width: 5rem;
height: 5rem;
background: green;
position: absolute;
bottom: -10rem;
left: 5rem;
transform-origin: left bottom;
transform: rotateX(60deg) skewX(-27deg) translateZ(5rem);
}
#Fbot {
width: 5rem;
height: 5rem;
background: green;
position: absolute;
bottom: -25rem;
transform-origin: left bottom;
transform: rotateX(60deg) skewX(-27deg) translateZ(4.99rem);
}
#Fbot_2 {
width: 5rem;
height: 5rem;
background: green;
position: absolute;
bottom: -15rem;
left: 5rem;
transform-origin: left bottom;
transform: rotateX(60deg) skewX(-27deg) translateZ(4.99rem);
}
#Fbot_3 {
width: 10rem;
height: 5rem;
background: green;
position: absolute;
bottom: -5rem;
left: 5rem;
transform-origin: left bottom;
transform: rotateX(60deg) skewX(-27deg) translateZ(4.99rem);
}
#Fright_1 {
width: 5rem;
height: 5rem;
background: red;
position: absolute;
left: 15rem;
transform-origin: left bottom;
transform: rotateY(-59deg) skewY(-26.8deg) translateZ(5rem);
}
#Fright_2 {
width: 5rem;
height: 5rem;
background: red;
position: absolute;
bottom: -10rem;
left: 5rem;
transform-origin: left bottom;
transform: rotateY(-59deg) skewY(-26.8deg) translateZ(5rem);
}
#Fright_3 {
width: 5rem;
height: 10rem;
background: red;
position: absolute;
bottom: -25rem;
left: 5rem;
transform-origin: left bottom;
transform: rotateY(-59deg) skewY(-26.8deg) translateZ(5rem);
}
#Fright_4 {
width: 5rem;
height: 5rem;
background: red;
position: absolute;
bottom: -15rem;
left: 10rem;
transform-origin: left bottom;
transform: rotateY(-59deg) skewY(-26.8deg) translateZ(5rem);
}
#Fleft {
width: 5rem;
height: 25rem;
background: red;
position: absolute;
bottom: -25rem;
transform-origin: left bottom;
transform: rotateY(-59deg) skewY(-26.8deg) translateZ(4.99rem);
}
#F_cnt {
margin-top: 5rem;
margin-left: 30rem;
position: absolute;
animation-name: F-anim;
animation-duration: 5s;
animation-iteration-count: infinite;
transform-style: preserve-3d;
}
#F {
perspective: 10000px;
perspective-origin: 50%;
background: black;
position: relative;
}
<body>
<div id="F">
<div id="F_cnt">
<div id="F1"></div>
<div id="F2"></div>
<div id="F3"></div>
<div id="Fb1"></div>
<div id="Fb2"></div>
<div id="Fb3"></div>
<div id="Ftop_1"></div>
<div id="Ftop_2"></div>
<div id="Fbot"></div>
<div id="Fbot_2"></div>
<div id="Fbot_3"></div>
<div id="Fright_1"></div>
<div id="Fright_2"></div>
<div id="Fright_3"></div>
<div id="Fright_4"></div>
<div id="Fleft"></div>
</div>
</div>
</body>