CSS Translate Z 转换与透视导致元素倾斜和扭曲答案

【问题标题】：CSS Translate Z transition with perspective causes elements to skew and distortCSS Translate Z 转换与透视导致元素倾斜和扭曲
【发布时间】：2021-02-10 18:51:07
【问题描述】：

我不确定我对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 轴的范围。要重现这一点，只需尝试在卡片上悬停几次，您就会发现它是随机发生的。

在我看来，这似乎与观点有关，但考虑到我什至不确定如何始终如一地重现它，我在这里超出了我的深度。

感谢您对此问题的任何理解。

【问题讨论】：

标签： html css css-transforms

【解决方案1】：

诀窍在于，您还对 perspecitve 应用了转换，因为它是造成这种不良效果的转换的一部分。即使在非悬停状态下，视角也需要保持不变：

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() 变换函数

【讨论】：

2 件事： 1. 你的代码 sn-p 中的黄牌看起来仍然很奇怪，尽管它的其余部分现在看起来很好。 2. 当您说使用perspective 属性更好时，您能帮我理解我将如何使用它吗？或者，如果您可以将我引导到一些资源，我可以更好地理解两者之间的区别，那也很好。
@Kuday (1) 更新代码，忘记移除悬停 (2) 对于这种特殊情况更好，因为它可以避免您处理此类问题，因为您可以简单地设置一次透视图 ( jsfiddle.net/yvfb8zgj 您在旧问题中这样做了）。以下是一些相关问题：stackoverflow.com/a/51891547/8620333 / stackoverflow.com/q/63026056/8620333