边界半径打破儿童

角度/ translateZ我跟着的CSS-只滚动视差效果的教程，但现在我想把图像的圆内。边界半径打破儿童

所以我...

1）父DIV（ “包装”）设置为我所选择的尺寸，

2）设置溢出隐藏父，（到目前为止好时，视差效果仍然工作在我的“裁剪”框），

3）...但是当我设置任何形式的边界半径，它打破了视差效果，冻结图像中的地方，当我滚动。

这里是我的笔：“包装” https://codepen.io/iiiDaNiii/pen/eEBEyY与所谓的方形格内工作的视差效果如果您尝试添加边框半径，它会打破视差效果。

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

任何rad思想？

更新/澄清：我想要的任何是圈外是透明....使得视差的圆的图像可能坐在即另一图像的顶部。

来源

2017-08-04 iiiDaNiii

我相信我找到了解决方案。

我已经为.wrapper元素添加了一个伪类，并将其固定为box-shadow，其中border-radius为5px，它保持了视差效果，并且还提供了圆角。

所以，以下的选择添加到您的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; 
}

我创建了一个活的小提琴here。

来源

2017-08-04 12:23:29

hrmmmmm这将工作，如果我把它设置在纯色背景的顶部，我可以匹配颜色.... 但是，我的最终游戏是让这个圆圈在另一个图像的顶部。所以我需要这个剪辑成为一个真正的剪辑....除非有一些方法可以使阴影边界半径“透视”到图像下面的内容...... – iiiDaNiii

请更新您的原始问题并将这些信息更新为其他人查看。 –

呼叫良好。顺便谢谢你的努力。您的建议可能是一个简单的解决方法，我可以在另一种情况下使用。 – iiiDaNiii

边界半径打破儿童

回答

相关问题