邊界半徑打破兒童

角度/ 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

邊界半徑打破兒童

回答

相關問題