我不确定我对 translateZ 和 perspective 的理解是否遗漏了一些东西，但我添加了 CodePen对于同样的。
这是我的代码:
body {
margin: 0;
height: 100vh;
}
.cards-container {
padding: 100px;
margin: auto;
margin-top: 100px;
transform-style: preserve-3d;
}
.cards-container,
.cards-container * {
height: 400px;
width: 400px;
box-sizing: border-box;
background-color: lightgray;
transition: all ease 1.6s;
/* perspective: 1200px; */
}
.card {
width: 200px;
height: 200px;
padding: 50px;
background-color: lime;
transform-style: preserve-3d;
}
.card-child {
width: 100px;
height: 100px;
background-color: rgb(255, 230, 0);
}
.cards-container:hover {
transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-35deg) translateZ(40px);
}
.cards-container:hover .card {
transform: perspective(1200px) translateZ(80px);
}
.cards-container:hover .card .card-child {
transform: perspective(1200px) translateZ(60px);
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<script src="index.js"></script>
<div class="cards-container">
<div class="card">
<div class="card-child"></div>
</div>
</div>
</body>
</html>我面临的问题是我无法持续重现的问题。如果您将鼠标悬停在我的示例中的卡片上，您会发现过渡顺利进行。预期的过渡是让 3 张卡片在悬停时从平面布局变为 3D 布局，其中每张卡片都会升起至其父卡片上方。但有时当我将鼠标悬停在它们上方时，过渡会变得很不稳定，整个卡片本身会倾斜/扭曲，超出 z 轴范围。要重现此情况，只需尝试将鼠标悬停在卡片上几次，您就会发现它是随机发生的。
在我看来，这似乎是有观点的，但考虑到我什至不确定如何一致地重现它，我已经超出了我的深度。
如果您能理解此问题，我们将不胜感激。
最佳答案
诀窍在于，您还应用了透视转换，因为它是产生这种不良效果的转换的一部分。即使在非悬停状态下，视角也需要保持不变:
body {
margin: 0;
height: 100vh;
}
.cards-container {
padding: 100px;
margin: auto;
margin-top: 100px;
transform-style: preserve-3d;
}
.cards-container,
.cards-container * {
height: 400px;
width: 400px;
box-sizing: border-box;
background-color: lightgray;
transition: all ease 1.6s;
/* perspective: 1200px; */
}
.card {
width: 200px;
height: 200px;
padding: 50px;
background-color: lime;
transform-style: preserve-3d;
}
.card-child {
width: 100px;
height: 100px;
background-color: rgb(255, 230, 0);
}
.cards-container {
transform: perspective(1200px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
.cards-container:hover {
transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-35deg) translateZ(40px);
}
.cards-container .card {
transform: perspective(1200px) translateZ(0px);
}
.cards-container:hover .card {
transform: perspective(1200px) translateZ(80px);
}
.cards-container .card .card-child {
transform: perspective(1200px) translateZ(0px);
}
.cards-container:hover .card .card-child {
transform: perspective(1200px) translateZ(60px);
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<script src="index.js"></script>
<div class="cards-container">
<div class="card">
<div class="card-child"></div>
</div>
</div>
</body>
</html>在这种情况下，最好考虑 perspective 属性而不是 perspective() 转换函数
关于html - CSS Translate Z 过渡与透视会导致元素倾斜和扭曲，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66126853/