如何使用CSS动画将五边形对折？

Question

这里是我的代码：https://jsfiddle.net/7y7d0jd6/ HTML:

<div id="slow-container">

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

      </div>
        </div>
    </div>
</div>

首次尝试CSS：

#slow-container     {   
    position: relative;

    top:100px;
    width: 100px;
    border-width: 96px 64px 0;
    border-style: solid;
    border-color: red transparent; }


#slow-container:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -176px;
    left: -64px;
    border-width: 0 114px 81px;
    border-style: solid;
    border-color: transparent transparent red;
}

        .slow-parent1   { 

            height: 0; 
            overflow: hidden;

            -webkit-transition-property: height;
            -webkit-transition-duration: 2s; 
            -webkit-perspective: 1000px; 
            -webkit-transform-style: preserve-3d; 

            -moz-transition-property:height; 
            -moz-transition-duration: 2s; 
            -moz-perspective: 1000px; 
            -moz-transform-style: preserve-3d; 

            -o-transition-property: all; 
            -o-transition-duration: 2s;
            -o-transform: rotateX(-90deg);
            -o-transform-origin: top;

            transition-property: height;
            transition-duration: 2s;
            perspective: 1000px;
            transform-style: preserve-3d;

            background: lightgreen;
        }
        .slow-parent2   { 

            background: white;
        }
        .slow-parent3   { 

            height: 300px; 
            background: red;

            -webkit-transition-property: all; 
            -webkit-transition-duration: 2s;
            -webkit-transform: rotateX(-90deg);
            -webkit-transform-origin: top; 

            -moz-transition-property: all; 
            -moz-transition-duration: 2s;
            -moz-transform: rotateX(-90deg);
            -moz-transform-origin: top; 

            -o-transition-property: all; 
            -o-transition-duration: 2s;
            -o-transform: rotateX(-90deg);
            -o-transform-origin: top;

            transition-property: all; 
            transition-duration: 2s;
            transform: rotateX(-90deg);
            transform-origin: top; 
        }


        #slow-container:hover .slow-parent1 {
        height: 301px; 

        }
        #slow-container:hover .slow-parent3 { 
            -webkit-transform: rotateX(0deg); 
            -moz-transform: rotateX(0deg); 
            -o-transform: rotateX(0deg); 
            transform: rotateX(0deg); 
            height: 300px;
        }

我正在尝试通过CSS动画将五边形对折。目前，它只是一个“下降”的条带，但我知道我可以让它看起来像五边形的顶部。

然而，有没有更平滑的方法来实现这一点？我被难住了。

我还尝试过： https://jsfiddle.net/7y7d0jd6/4/ 第二个HTML尝试：

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

第二次CSS尝试：

#slow-container     {   
    position: relative;

    top:100px;
    width: 100px;
    border-width: 96px 64px 0;
    border-style: solid;
    border-color: red transparent; }


#slow-container:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -176px;
    left: -64px;
    border-width: 0 114px 81px;
    border-style: solid;
    border-color: transparent transparent white;
}
#slow-container2 {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -176px;
    left: -64px;
    border-width: 0 114px 81px;
    border-style: solid;
    border-color: transparent transparent red;
}

        .slow-parent1   { 

            height: 0; 
            overflow: hidden;

            -webkit-transition-property: height;
            -webkit-transition-duration: 2s; 
            -webkit-perspective: 1000px; 
            -webkit-transform-style: preserve-3d; 

            -moz-transition-property:height; 
            -moz-transition-duration: 2s; 
            -moz-perspective: 1000px; 
            -moz-transform-style: preserve-3d; 

            -o-transition-property: all; 
            -o-transition-duration: 2s;
            -o-transform: rotateX(-90deg);
            -o-transform-origin: top;

            transition-property: height;
            transition-duration: 2s;
            perspective: 1000px;
            transform-style: preserve-3d;

            background: lightgreen;
        }
        .slow-parent2   { 

            background: white;
        }
        .slow-parent3   { 

            height: 300px; 
            background: red;

            -webkit-transition-property: all; 
            -webkit-transition-duration: 2s;
            -webkit-transform: rotateX(-90deg);
            -webkit-transform-origin: top; 

            -moz-transition-property: all; 
            -moz-transition-duration: 2s;
            -moz-transform: rotateX(-90deg);
            -moz-transform-origin: top; 

            -o-transition-property: all; 
            -o-transition-duration: 2s;
            -o-transform: rotateX(-90deg);
            -o-transform-origin: top;

            transition-property: all; 
            transition-duration: 2s;
            transform: rotateX(-90deg);
            transform-origin: top; 
        }


        #slow-container:hover #slow-container2  {
        height: 301px;  

        }
        #slow-container:hover #slow-container2  { 
            -webkit-transform: rotateX(0deg); 
            -moz-transform: rotateX(0deg); 
            -o-transform: rotateX(0deg); 
            transform: rotateX(180deg); 
            height: 300px;
      top:-95px;  border-color: transparent transparent pink;

        }

添加一个新的类 #slow-container2 并尝试 "折叠" 它，但显然这并不能达到我的目的，只是更接近了一步。它会变成粉色并向下折叠。

然而，我希望它像动画一样缓慢地折叠下来。为什么持续时间不起作用呢？

- Y. Zhang

---

将第三方网站上的代码放在这里，这样即使将来该网站消失，也不会影响到任何访问者。趁你仍然可以保留第三方网站链接的时候，将相关代码放在这里。 - Rob

好的，会做。 - Y. Zhang

像这样 https://jsfiddle.net/7y7d0jd6/5/ ？ - DaniP

非常感谢，翻译如下：太完美了！我看到你在底部所做的了！ - Y. Zhang

我们来确认一下，您想让它看起来像这样吗？链接 - andreini

是的！@niandrei 就像那个折叠。 - Y. Zhang

Answer 1

你需要做的是在正确的元素上添加transition属性，并更改变换的起点。添加以下内容：

#slow-container2 {
     transition:all .3s linear;
     transform-origin:bottom center;
}

---

完整例子

body {background:#dadada}
#slow-container {
  position: relative;
  top: 100px;
  width: 100px;
  border-width: 96px 64px 0;
  border-style: solid;
  border-color: red transparent;
}
#slow-container:before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  top: -176px;
  left: -64px;
  border-width: 0 114px 81px;
  border-style: solid;
  border-color: transparent transparent white;
}
#slow-container2 {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  top: -176px;
  left: -64px;
  border-width: 0 114px 81px;
  border-style: solid;
  border-color: transparent transparent red;
}
.slow-parent1 {
  height: 0;
  overflow: hidden;
  background: lightgreen;
}
.slow-parent2 {
  background: white;
}
.slow-parent3 {
  height: 300px;
  background: red;
}

#slow-container2 {
  transition: all .3s linear;
  transform-origin: bottom center;
}
#slow-container:hover #slow-container2 {
  transform: rotateX(180deg);
  border-color: transparent transparent pink;
}

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

- DaniP