border-radius on parent div breaks perspective / translateZ on child - html

Question

I followed a tutorial for a css-only scrolling parallax effect, but now I want to put the image inside a circle.
So I...
1) set the parent div ("wrapper") to my chosen dimensions,
2) set the parent to overflow-hidden, (so far so good, the parallax effect still works inside my "clipped" box),
3) ...but when I set a border-radius of any kind, it breaks the parallax effect, freezing the image in place when I scroll.
Here's my pen: https://codepen.io/iiiDaNiii/pen/eEBEyY with the parallax effect working inside a square div called "wrapper." If you try to add a border-radius, it breaks the parallax effect.
.html {
overflow:hidden;
}
.scroll {
right:0px;
overflow-y:auto;
overflow-x:hidden;
position:absolute;
height:100vh;
width:100vw;
-webkit-overflow-scrowling: touch;
-webkit-perspective: 1px;
perspective: 1px;
perspective-origin: 0% 0%;
margins: 0px;
padding: 0px;
top:0px;
}
.wrapper {
background-color:blue;
position:relative;
height:20em;
width:20em;
overflow:hidden;
}
.image {
position:relative;
height:vh;
width:vw;
-webkit- transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
transform-origin: 50% 0;
}
.space{
position:relative;
background-color:white;
height:2000px;
}
Any rad thoughts?
Update / clarification: I want whatever is outside of the circle to be transparent.... so that the parallax-circle-image could sit on top of i.e. another image.

Answer 1

I believe I've found a solution.
I've added a pseudo-class to the .wrapper element and applied a solid box-shadow to it with a border-radius of 5px, which maintains the parallax effect and also gives rounded corners.
So, add the following selector to your css:
.wrapper:before
{
position: absolute;
content: '';
top: 0; left: 0;
right: 0; bottom: 0;
border-radius: 5px;
z-index: 5;
box-shadow: 0 0 0 10px white;
}
I created a live Fiddle here.