我正在尝试在父级中创建两个 div，一个 div 具有一类正面，另一个具有一类背面。我试图翻转背面并将其放在前面的下面，所以当我翻转其父级时，背面显示，当它再次翻转回正面时，创建一个 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>
最佳答案
编辑:稍微简化了代码。
您可以通过包含transform-style: preserve-3d 来解决正面总是显示在顶部的问题。您肯定还希望包括 backface-visibility: hidden，这是您的直觉。
此外，如果您使用绝对定位而不是平移，您将更容易将卡片面层叠放置，所以我已经为您做了这个更改。
下面的示例在没有声明 z-index 的情况下对我来说工作得很好，但是如果您遇到最初显示背面而不是正面的问题，您可以简单地给前面的 div 一个z-index 高于后面的 div。
.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 - 如何修复此 css 卡片翻转过渡？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44209113/