创建一个3d框效果，脸部不断出现在另一个上面

Question

如何达到预期的效果？我想创建一种在x轴上以3d翻转并显示另一面的盒子，同时保留相同的尺寸。目前效果几乎正常，但由于某种原因，一张脸总是可见的。为什么会发生这种情况以及如何改变它？

#div1 {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 100px;
    perspective: 300px;
    perspective-origin: 50% 50%;
    transition: all 1s;

}

#div2 {
    width: 100px;
    height: 100px;
    position: absolute;
    border: 1px solid black;
    background-color: red;
    transform-origin: 50% 50% -50px;
    transition: all 1s;
}

#div3 {
    width: 100px;
    height: 100px;
    position: absolute;
    border: 1px solid black;
    background-color: orange;
    transform-origin: 50% 50% -50px;
    transform: rotateX(90deg);
    transition: all 1s;
}
#div1:hover {
  //transform: rotate(180deg)
}

#div1:hover #div2 {
	transform: rotateX(-90deg);
}

#div1:hover #div3 {
	transform: rotateX(0deg);
}

hover me!

<div id="div1">
  <div id="div2"></div>
  <div id="div3"></div>
</div>

Answer 1

只需添加此css属性

即可

11 16:51

#div2 { z-index: 1;}

#div1:hover #div2 { z-index: 0;}

#div1 {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 100px;
    perspective: 300px;
    perspective-origin: 50% 50%;
    transition: all 1s;

}

#div2 {
    z-index: 1;
    width: 100px;
    height: 100px;
    position: absolute;
    border: 1px solid black;
    background-color: red;
    transform-origin: 50% 50% -50px;
    transition: all 1s;
}

#div3 {
    width: 100px;
    height: 100px;
    position: absolute;
    border: 1px solid black;
    background-color: orange;
    transform-origin: 50% 50% -50px;
    transform: rotateX(90deg);
    transition: all 1s;
}
#div1:hover {
  //transform: rotate(180deg)
}

#div1:hover #div2 {
	transform: rotateX(-90deg);
    z-index: 0;
}

#div1:hover #div3 {
	transform: rotateX(0deg);
}

Answer 2

添加backface-visibility:hidden;

＆＃13;

＆＃13;

div {
  backface-visibility: hidden;
}

#div1 {
  width: 100px;
  height: 100px;
  position: relative;
  margin: 100px;
  perspective: 300px;
  perspective-origin: 50% 50%;
  transition: all 1s;
}

#div2 {
  width: 100px;
  height: 100px;
  position: absolute;
  border: 1px solid black;
  background-color: red;
  transform-origin: 50% 50% -50px;
  transition: all 1s;
}

#div3 {
  width: 100px;
  height: 100px;
  position: absolute;
  border: 1px solid black;
  background-color: orange;
  transform-origin: 50% 50% -50px;
  transform: rotateX(90deg);
  transition: all 1s;
}

#div1:hover {
  //transform: rotate(180deg)
}

#div1:hover #div2 {
  transform: rotateX(-90deg);
}

#div1:hover #div3 {
  transform: rotateX(0deg);
}

＆＃13;

<div id="div1">
  <div id="div2"></div>
  <div id="div3"></div>
</div>

＆＃13;

＆＃13;

＆＃13;