简单的 HTML 和 CSS skewY

问题描述

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

目的是让所有三行组成一个三角形，并在看起来像单个对象的地方翻转为三角形，因此第 1 行和第 2 行正是我所追求的。该对象确实必须由三部分组成，因为动画的下一部分将在下方留下该形状的第二个版本，例如反射。

附加的 JSfiddle 是我最接近成功的版本，但我有另一个版本，其中 line3 最终位于正确的位置，但在到达那里的途中“反弹”并与三角形的其余部分断开连接。在所有其他版本中，第 3 行只是随机出现在某个地方。我试过在变换中交换各种东西，改变变换原点等，但由于某种原因，这让我感到困惑。我不明白为什么会这样。我显然仍然对倾斜/旋转行为的工作原理缺乏一些了解，因为这似乎应该是一个容易解决的问题，但我在这里。任何帮助将非常感激。也欢迎我如何完全不同地做到这一点的建议，因为我的另一个选择是 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>

解决方法

这似乎是与插值相关的错误。将默认旋转设置为等于 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

css-transforms css-transitions html

简单的 HTML 和 CSS skewY

问题描述

解决方法

相关问答