Question

我正在尝试在父级中创建两个div，其中一个div有一个前面的类，另一个带有一个后面的类。我试图翻转后面的一个并将它放在前面的一个下面，所以当我翻转它的父母时，后面的一个显示，当它再次翻转时，前面的一个显示，创建一个三维卡片在翻转时翻转。然而，背部与前部重叠的任何地方，无论从前部还是后部观察，前部都是可见的。我已经尝试过使用背面可见性：隐藏在两者上，从我的理解中应该使div的背面在翻转时不可见，但这会导致背部完全消失并且对前面没有影响。我知道这是可能的，因为我看到有人这样做，但我在这里做错了什么，我该如何解决这些问题呢？

https://fiddle.jshell.net/h8vz85b3/2/

<!DOCTYPE html>
<html>
    <head>
        <title> media test</title>
        <meta charset="utf-8">
        <meta name="keywords" content="test,css, css test">
        <meta name="description" content="A CSS test and review.">
        <meta name="author" content="brandon lind">
        <link rel="stylesheet" media="screen" href="css/main.css">
        <style>
            .parent{
                transition: transform 1s ease-in-out 0s;
                width: 100px;
            }
            .parent:hover {
                transform: rotateY(180deg);
            }
            .back,.front{
                width: 100px;
                height: 170px;
                //backface-visibility: hidden;

            }
            .front{
                background-color: blue;
                transform: translate(0, -150px);
            }
            .back{
                background-color: red;
                transform: rotateY(190deg);          
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="back">
                back
            </div>
            <div class="front">
                front
            </div>
        </div>
    </body>
</html>

Answer 1

编辑：稍微简化了代码。

您可以通过加入transform-style: preserve-3d来解决正面始终显示在前面的问题。您也肯定希望包含backface-visibility: hidden，就像您的直觉一样。

另外，如果你使用绝对定位而不是翻译，你可以更容易地将卡面定位在彼此之上，所以我已经为你做了这个改变。

下面的示例对我来说很合适而没有声明z-index，但是如果你遇到问题，最初显示的是背面而不是前面，你可以简单地给前面的div增加{{1}比后面的div。

z-index

.parent {
  transition: transform 1s ease-in-out 0s;
  transform-style: preserve-3d;
  width: 100px;
}
.parent:hover {
  transform: rotateY(180deg);
}
.back,
.front {
  width: 100px;
  height: 170px;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
}
.front {
  background-color: blue;
}
.back {
  background-color: red;
  transform: rotateY(180deg);
}

如何修复此css卡翻转过渡？

1 个答案: