父div上的border-radius打破了视角/子div上的translateZ

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