Question

我正在使用'旋转'创建一个带开门的降临节日历。元素形成使用vw和vh大小的网格。当我打开一扇门时，变形元素的拉伸透视图在元素上方可见，但隐藏在下面行中的元素下方（因为'Dev Tools显示形状是正确的）。无法弄明白 - https://codepen.io/marklsanders/full/jawqJx/处有一个CodePen。

这也是一些CSS：

figcaption {
    backface-visibility: hidden;
    backface-visibility:visible;
    background-color: $color-grey;
    color: $color-white;
    font-size: 3em;
    font-weight: bold;
    height: 100%;
    left: 0;
    line-height: 1.25em;
    position: absolute;
    text-align: center;
    top: 0;
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform 1s;
    width: 100%;

    &:after {
      backface-visibility: hidden;
      backface-visibility: visible;
      background-color: $color-grey;
      content: "";
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      transform: rotateY(180deg);
      width: 100%;
    }

由于

Answer 1

是的，您可以使用z-index属性。

首先将所有z-index属性设置为作为卡片根元素的图形类的1。

figure {
   margin: 0;
   z-index: 1; //z-index property
}

然后将打开的div z-index属性设置为2到您的根元素。如下所示

.card.open {
  z-index: 2; //z-index property added
 }

codepen：https://codepen.io/marklsanders/pen/jawqJx

旋转的CSS元素隐藏在另一个元素后面

1 个答案: