爲div反射提供更多樣式

我正在嘗試使用以下css將反射添加到div。爲div反射提供更多樣式

CSS ::

div.reflection 
{ 
    -webkit-transform: scaleY(-1); 
    -moz-transform: scaleY(-1); 
    -o-transform: scaleY(-1); 
    -ms-transform: scaleY(-1); 
    transform: scaleY(-1); 
    opacity:0.6; 
    background-color: red; 
    position:absolute; 
    top:82%; 
    height:30%; 
    width:100%; 

}

反射來，但其較低的不透明度值只是翻轉圖像。我如何能增加更多的風格體現，我想給反映如下圖所示PIC .. enter image description here

但我的CSS我得到這個， enter image description here

來源

2013-06-25 anam

我覺得你以後稱爲3D的技術轉換。網絡上有這麼多的例子，我不知道從哪裏開始！只需搜索「css 3d變換」與谷歌圖像。 –

有幾種可能性，以實現這一目標：

可以定義的SVG（或梯度圖像）和與該屏蔽反射圖像或者甚至使用mask-image property並使用梯度掩蔽圖像：

This Example示出了這兩種技術。 Webkit使用

div::after{ 
    -webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1)); 
}

和Firefox SVG與面罩：

<svg> 
    <defs> 
    <linearGradient id="gradient" x1="0" y1="0%" x2 ="0" y2="100%"> 
     <stop stop-color="black" offset="0"/> 
     <stop stop-color="white" offset="1"/> 
    </linearGradient> 
    <mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> 
     <rect y="0.3" width="1" height=".7" fill="url(#gradient)" /> 
    </mask> 
    </defs> 
</svg> 

div::after{ 
    mask: url(#mask); 
}

來源

2013-06-25 08:22:44 Christoph

爲div反射提供更多樣式

回答

相關問題