html - CSS Translate Z 转换与透视导致元素倾斜和扭曲-6ren

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

转载作者：行者123 更新时间：2023-12-04 08:08:00

24

4

我不确定我对 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 轴的范围。要重现这一点，只需尝试在卡片上悬停几次，您会发现它是随机发生的。
在我看来，这似乎与观点有关，但考虑到我什至不确定如何始终如一地重现它，我在这里超出了我的深度。
对此问题的任何理解表示赞赏。

最佳答案

诀窍在于，您还对 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()变换函数

关于html - CSS Translate Z 转换与透视导致元素倾斜和扭曲，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66126853/

24

4

0

文章推荐： terraform - 如何修复 provider.vault : no vault token found?

文章推荐： xml - XSLT:如何用所有 sibling 的串联替换第一个 sibling ？

文章推荐： javascript - 在字符串中搜索第一个括号

OpenGL 透视
我正在尝试使用透视投影描绘一个立方体，但我得到的只是一个正方形的角。正方形的面设置在原点并向正方向扩展。使用 glOrtho 我可以设置坐标系，但我在使用 glPerspective 做同样的事情时遇
mysql - 子查询选择行作为列(透视)
SELECT j.departure, stopDepartures.* FROM journey j JOIN journey_day ON journey_day.journey = j.id J
MYSQL 透视/将行转换为值匹配的列
我确实需要一些帮助来了解如何根据相似的值对表格进行透视。 day | startDate ----------------------- Monday | 09:00 Monday |
python - 透视/旋转数据集的最佳方式
我有以下数据框 df = pd.DataFrame({ '1': ['Mon (07/08)','Sales', '2'], '2': ['Mon (07/0
python - 分组依据/透视
dummy_df = pd.DataFrame({ 'accnt' : [101, 102, 103, 104, 101, 102, 103, 104, 101, 102, 103, 104,
android - 3D旋转-透视
public class MainActivity extends Activity { LinearLayout rotator; protected void onCreate(Bundle sa
PHP ImageMagick Plane2Cylinder 透视
我正在尝试通过 PHP 更改 ImageMagick 中 Plane2Cylinder 失真的视角。为了帮助解释我在寻找什么，我制作了这张图: 您可以看到红色 block 的下部比顶部的半径更大，就
sql - 透视 - SQL - 来自子查询的值
我有一个像这样的简单查询.. USE AdventureWorks; GO SELECT DaysToManufacture, AVG(StandardCost) AS AverageCost FRO
mysql - 透视 MySQL 数据
我希望我可以更改架构，但我受制于它，假设我有以下表格 JanDataTable FebDataTable MarDataTable ProductsTable 其中前三个表有 ID 和 Amount
c# - 透视 3D 对象
我正在将我们的一个旧应用程序从 vb6 更新到 c#，在此过程中必须重新创建原始程序员设计的自定义控件。该控件简单地获取对象的尺寸，矩形或圆锥形，并在 3D 中放置对象的轮廓草图(我认为在技术上是 2
mysql - 透视 MySQL 表
我一直在尝试在 MySQL 中对表进行透视(将行移动到列)。我知道 mysql 没有枢纽功能，所以我认为需要联合，但不是 100% 确定。我有三列，user_id、option_id 和 Questi
mysql - 透视 mysql 表返回
我正在尝试旋转像这样创建的 mysql 表 'CREATE TABLE `fundreturns` ( `Timestamp` datetime NOT NULL, `FundName` varcha
mysql - 多连接查询，透视？烦恼
提前感谢任何对此提供帮助的人。我知道我以前做过这件事，没有太多痛苦，但似乎找不到解决方案我的数据库看起来像这样: `tbl_user: ---------- id ( pkey )
javascript - 透视 CSS3 不工作
我正在尝试开发 X 轴方向的卡片翻转动画。截至目前，div 现在只需使用 rotateX() 方法进行旋转。我试过对上层 div 使用透视属性，而不是工作它扭曲了我的 div 结构。因为，这只是一个工
CSS3 透视 z 轴可见性
我有一个带有 CSS3 透视图的 DIV 元素。 DIV 包含 2 个子 DIV，其中之一在 z 轴上有平移。这应该会导致一个 DIV 在另一个前面，因此后面的那个应该被挡住。然而，这些 DIV 的
CSS3 第二个 3D 透视
大家好，我有一张这样的 map http://sinanisler.com/demo/map/ 如您所见，有一些树，但不是真正的视角，我想要这个 http://sinanisler.com/demo/
c++ - OpenGL 平截头体、透视
我有以下代码将快照拍摄到帧缓冲区。我验证了帧缓冲区工作正常并且相机正确地面向对象。我曾经正确地完成图片，但它是基于错误的代码，使用了错误的截锥体。所以我决定重新开始(使用截锥体)。物体以中间为中心，
python - 透视 Pandas 数据并添加列
我正在尝试将求和列添加到透视数据框，但不断收到数据解析错误。 mydata = [{'amount': 3200, 'close_date':'2013-03-31', 'customer': 'Cu
c# - 透视 IEnumerable 列表
我正在尝试将一些 groupby/crosstabbing 逻辑应用于用户定义对象的 IEnumerable 列表，并且想知道是否有人可以帮助我。我坚持使用现有的(相当烦人的)对象模型来工作，但无论如
ios - CoreImage 的深度/透视？
我想使用一个 CALayer 创建如下图所示的效果 - 而不是通过拆分图像、对两半进行透视变换然后将它们并排放置。可以使用 CoreImage 以任何方式完成吗？或者，有人可以使用 OpenGL

首页

博学

6Ren·AI

商城

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