CSS Folding animation with transform - html

Question

I have this square: https://jsfiddle.net/34f93mL3/
As you can see, when you hover over it, the top folds down and when it reaches the bottom it becomes a polkadotted pink.
However, what I want to happen is for it to mimic an actual folding motion, meaning it should not have polkadots until it's "folded" a little more.
Here is the full code, which uses 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>

Answer 1

Just remove in your hover style code #fff 10%, from radial gradient

Answer 2

Use CSS3 properties perspective to feel folding effect.
References: 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>