如何修复这个 CSS 卡片翻转过渡？答案

【问题标题】：How can I fix this css card flip transition?如何修复这个 CSS 卡片翻转过渡？
【发布时间】：2017-10-27 19:01:24
【问题描述】：

我正在尝试在父级中创建两个 div，其中一个 div 具有一个 front 类，另一个 div 具有一个 back 类。我正在尝试翻转背面并将其放置在正面下方，因此当我翻转其父级时，背面显示，当它再次翻转时显示前面显示，创建一个 3 维卡，悬停时翻转。但是，无论从正面还是背面看，背面与正面重叠的任何地方都只能看到正面。我曾尝试使用 backface-visibility: hidden on both，据我了解，这应该使 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>

【问题讨论】：

标签： css css-transitions css-transforms

【解决方案1】：

编辑：稍微简化了代码。

您可以通过添加transform-style: preserve-3d 来解决正面始终显示在顶部的问题。你肯定也想加入backface-visibility: hidden，这是你的直觉。

此外，如果您使用绝对定位而不是平移，您可以更轻松地将卡片面相互叠放，因此我已为您进行了更改。

下面的示例在没有声明z-index 的情况下对我来说很好，但是如果您在最初显示背面而不是正面时遇到问题，您可以简单地给前面的 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>

【讨论】：