turner turner - 6 months ago 16
CSS Question

How to make a pentagon fold in half with CSS animation?

Here is my code:
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>


FIRST CSS TRY:

#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;
}


I am trying to make a pentagon fold in half through CSS animation. So far, it's just a strip that "comes down" and I Know I can make it somehow look like the top of a pentagon.

However, is there a smoother way to do this?? I'm stumped.

I've also tried:
https://jsfiddle.net/7y7d0jd6/4/
SECOND HTML TRY:

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


SECOND CSS TRY:

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

}


adding a new class
#slow-container2
and trying to "fold" that
which obviously doesn't do what I want but seems to be a closer step. It turns pink and folds down.

However, I want it to slowly fold down, like an animation. Why does the duration not work with this?

Answer

What you need is to add the transition property on the right element and to change the origin of the transform. Add this :

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

Full Example

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>