简单 HTML 和 CSS skewY 的奇怪行为

Question

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

目的是让所有三行组成一个三角形，然后翻转成一个三角形，看起来像一个对象，所以第 1 行和第 2 行正是我所追求的。该对象确实必须由三部分组成，因为动画的下一部分将在下面留下该形状的第二个版本，如倒影。

附带的 JSFiddle 是我最接近成功的版本，但我有另一个版本，其中 line3 在正确的位置结束，但 'bounces' 并与三角形的其余部分断开连接在那里。在所有其他版本中，line3 只是随机出现在某个地方。我试过在变换中交换各种东西，改变变换原点等，但出于某种原因，这让我感到困惑。我不明白 为什么 它会这样。我显然仍然缺乏对 skew/rotate 行为如何工作的一些理解，因为这看起来应该是一个容易解决的问题，但我在这里。任何帮助将非常感激。也愿意接受有关如何以完全不同的方式执行此操作的建议，因为我的另一个选择是 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>

Answer 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>

相关问题以获取更多详细信息：

简单 HTML 和 CSS skewY 的奇怪行为

Strange behaviour with simple HTML and CSS skewY

html

css

css-transitions

css-transforms