带有变换的 CSS 折叠动画答案

【问题标题】：CSS Folding animation with transform带有变换的 CSS 折叠动画
【发布时间】：2016-10-06 07:21:26
【问题描述】：

如您所见，当您将鼠标悬停在它上面时，顶部会向下折叠，当它到达底部时，它会变成圆点粉红色。

但是，我希望它模仿实际的折叠动作，这意味着它不应该有 polkadots，直到它“折叠”更多一点。

这里是完整的代码，它只使用了 HTML 和 CSS：

body {
  background: white
}
#slow-container {
  top: 100px;
  left: 200px;
  height: 50px;
  position: absolute;
  width: 100px;
  background: lightblue;
}
#slow-container:before {
  top: -50px;
  height: 50px;
  position: absolute;
  width: 100px;
  background: lightblue;
}
#slow-container2 {
  top: -50px;
  height: 50px;
  position: absolute;
  width: 100px;
  background: lightblue;
}
.slow-parent1 {
  height: 0;
  overflow: hidden;
  background: lightgreen;
}
.slow-parent2 {
  background: white;
}
.slow-parent3 {
  height: 300px;
  background: red;
}
#slow-container2 {
  transition: all 1s linear;
  transform-origin: bottom center;
}
#slow-container:hover #slow-container2 {
  transform: rotateX(180deg);
  background-color: lightpink;
  background-image: radial-gradient(#fff 10%, transparent 10%), radial-gradient(#fff 10%, transparent 10%);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

<div id="slow-container">
  <div id="slow-container2">
  </div>
  <div class="slow-parent1">
    <div class="slow-parent2">
      <div class="slow-parent3">
        stuff goes here later
      </div>
    </div>
  </div>
</div>
</div>

【问题讨论】：

标签： html css animation transform

【解决方案1】：

使用CSS3属性perspective感受折叠效果。

参考：https://css-tricks.com/almanac/properties/p/perspective/

body {
  background: white
}
#slow-container {
  top: 100px;
  left: 200px;
  height: 50px;
  position: absolute;
  width: 100px;
  background: lightblue;
}
#slow-container:before {
  top: -50px;
  height: 50px;
  position: absolute;
  width: 100px;
  background: lightblue;
}
#slow-container2 {
  top: -50px;
  height: 50px;
  position: absolute;
  width: 100px;
  background: lightblue;
}
.slow-parent1 {
  height: 0;
  overflow: hidden;
  background: lightgreen;
}
.slow-parent2 {
  background: white;
}
.slow-parent3 {
  height: 300px;
  background: red;
}
#slow-container2 {
  transition: all 1s linear;
  transform-origin: bottom center;
}
#slow-container:hover #slow-container2 {
  transform: perspective(200px) rotateX(180deg);
  background-color: lightpink;
  background-image: radial-gradient(#fff 10%, transparent 10%), radial-gradient(#fff 10%, transparent 10%);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

<div id="slow-container">
  <div id="slow-container2">
  </div>
  <div class="slow-parent1">
    <div class="slow-parent2">
      <div class="slow-parent3">
        stuff goes here later
      </div>
    </div>
  </div>
</div>

【讨论】：

这绝对有助于动画部分！仍在尝试找出 polkadots（在折叠更多之前不要让它们显示）
是的，所以我认为这与背面可见性属性有关？波尔卡圆点应该是顶片的背面，所以在纸张折叠得更多之前它们不应该显示出来
@turner 这是其中一种想法，或者您可以延迟应用背景图像，例如jsfiddle.net/34f93mL3/4

【解决方案2】：

只需从径向渐变中删除悬停样式代码#fff 10%,

【讨论】：

是的，我是在我自己的系统上做的，你也想去掉粉色吗？
hm，这几乎可以工作......但是，它完全去除了波尔卡圆点。我希望它在折叠得更多之前不会显示，而不是我所拥有的会发生什么，这会显示悬停时的 polkadots。 @AnkitGupta
找不到你真正想要的东西
我想你想要那个，当我们悬停时会出现点，折叠时会褪色，最后会溶解成纯色对吧？