Check out this square: https://jsfiddle.net/34f93mL3/
If you hover over it, you'll see that the top folds down and turns into a pink polka-dotted pattern when it reaches the bottom.
However, my goal is to make it look more like an actual folding motion, where the polka dots appear only after it's "folded" a little further.
Below is the complete code using only HTML and 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>