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

Question

我正在尝试在父级中创建两个 div，其中一个 div 的 class 位于前面，另一个 class 位于背部。我试图翻转背面并将其放在前面的下面，所以当我翻转其父级时，背面显示，当它再次翻转回正面时，创建一个 3 维卡片，悬停时翻转。但是，在背面与正面重叠的任何地方，无论从正面还是从背面看，都只能看到正面。我尝试在两者上都使用 backface-visibility: hidden ，根据我的理解，这应该使 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 比后面 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);
}

<div class="parent">
  <div class="back">
    back
  </div>
  <div class="front">
    front
  </div>
</div>

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

How can I fix this css card flip transition?

css

css-transitions

css-transforms