简单的 HTML 和 CSS skewY 的奇怪行为答案

【问题标题】：Strange behaviour with simple HTML and CSS skewY简单的 HTML 和 CSS skewY 的奇怪行为
【发布时间】：2021-04-26 19:41:24
【问题描述】：

我正在尝试使用 CSS 来“动画化”一些对象，使用 skewY 和 rotateY。它仍然是 WIP，但我有一个显示代码的 JSFiddle。悬停时，右侧的三行应围绕左侧的中心垂直轴平滑翻转。垂直线（line1）和较高的线（line2）似乎都可以毫无问题地翻转。对第三行 (line3) 执行相同操作会导致奇怪的行为 - 它似乎围绕 Y 旋转，但 Y 出现在 45 度角？然后，一旦转换完成，它就会轻弹到正确的位置，几乎就像它正在按顺序而不是同时进行转换的一部分，就像 line2 发生的那样。忽略中间的红线，它是用来做间距的。

目的是让所有三条线组成一个三角形，然后翻转成一个三角形，看起来像一个单独的对象，所以 line1 和 line2 正是我所追求的。对象必须由三部分组成，因为动画的下一部分将在下面留下该形状的第二个版本，就像反射一样。

附加的 JSFiddle 是我最接近成功的一个版本，但我有另一个版本，其中 line3 最终位于正确的位置，但在途中“反弹”并与三角形的其余部分断开连接。在所有其他版本中，line3 只是随机出现在某个地方。我试过在变换中交换各种东西，改变变换原点等，但由于某种原因，这让我迷惑了。我不明白为什么它的行为是这样的。我显然仍然缺乏对倾斜/旋转行为的工作原理的一些了解，因为这似乎应该是一个容易解决的问题，但我在这里。任何帮助将非常感激。我也愿意接受关于如何以完全不同的方式做到这一点的建议，因为我的另一个选择是 Adobe Illustrator/After Effects 组合。谢谢。

.background {
  background-color: #DEDEDE;
  width: 200px;
  height: 200px;
  position: relative;
}

.b {
  background-color: #DEDEDE;
  width: 100px;
  height: 100px;
}

.d {
  background-color: red;
  width: 200px;
  height: 2px;
  position: absolute;
  bottom: 99px;
  left: 0px;
}

.line1 {
  height: 200px;
  border-left: 5px solid black;
  position: absolute;
  left: 110px;
  top: 0px;
  transform-origin: -10px 100px;
  transition: transform 1s;
}

.background:hover>.line1 {
  transform: rotateY(180deg);
}

.line2 {
  width: 85px;
  border-top: 7px solid black;
  position: absolute;
  left: 115px;
  top: -17px;
  transform-origin: -15px 0px;
  transform: skewY(48.5deg);
  transition: transform 1s;
}

.background:hover>.line2 {
  transform: rotateY(180deg) skewY(48.5deg);
}

.line3 {
  width: 85px;
  border-bottom: 7px solid black;
  position: absolute;
  left: 115px;
  top: 210px;
  transform-origin: -15px;
  transform: skewY(-48.5deg);
  transition: transform 1s;
}

.background:hover>.line3 {
  transform: rotateY(180deg) skewY(-48.5deg);
}

<!DOCTYPE html>

<head>
  <title>DB</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="background">
    <div class="line1"></div>
    <div class="d"></div>
    <div class="line2"></div>
    <div class="line3"></div>
  </div>
</body>

【问题讨论】：

任何特定的浏览器？我认为在 chrome 中运行代码没有问题
它似乎在 Edge 中也可以正常工作，但我主要使用 Firefox。我看了一下 caniuse 和 skewY 应该受 Firefox 支持（并且适用于 line2）
你可能在 Firefox 中发现了一个错误

标签： html css css-transitions css-transforms

【解决方案1】：

这似乎是与插值有关的错误。设置默认旋转等于0deg 以避免这种情况：

.background {
  background-color: #DEDEDE;
  width: 200px;
  height: 200px;
  position: relative;
}

.b {
  background-color: #DEDEDE;
  width: 100px;
  height: 100px;
}

.d {
  background-color: red;
  width: 200px;
  height: 2px;
  position: absolute;
  bottom: 99px;
  left: 0px;
}

.line1 {
  height: 200px;
  border-left: 5px solid black;
  position: absolute;
  left: 110px;
  top: 0px;
  transform-origin: -10px 100px;
  transition: transform 1s;
}

.background:hover>.line1 {
  transform: rotateY(180deg);
}

.line2 {
  width: 85px;
  border-top: 7px solid black;
  position: absolute;
  left: 115px;
  top: -17px;
  transform-origin: -15px 0px;
  transform: rotateY(0deg)  skewY(48.5deg);
  transition: transform 1s;
}

.background:hover>.line2 {
  transform: rotateY(180deg) skewY(48.5deg);
}

.line3 {
  width: 85px;
  border-bottom: 7px solid black;
  position: absolute;
  left: 115px;
  top: 210px;
  transform-origin: -15px;
  transform:rotateY(0deg) skewY(-48.5deg);
  transition: transform 1s;
}

.background:hover>.line3 {
  transform: rotateY(180deg) skewY(-48.5deg);
}

<!DOCTYPE html>

<head>
  <title>DB</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="background">
    <div class="line1"></div>
    <div class="d"></div>
    <div class="line2"></div>
    <div class="line3"></div>
  </div>
</body>

获取更多详情的相关问题：Weird behavior when rotating an element on hover

【讨论】：

啊，太好了，谢谢。没想到尝试这样做，因为它在 line2 上运行良好，假设我的知识不知何故偏离了基础。非常感谢。