背面可見性在子元素中製作文本模糊

我正在使用css3的精彩轉換功能爲我的佈局製作可堆疊的六邊形！唯一的問題是，當我和a：懸停效果改變它的透明度時，在轉換過程中它會改變反別名屬性，平滑所有行，並使文本模糊。它也暫時使它周圍的一切都失去了，儘管它在一秒鐘左右之後都會恢復原狀。雖然這不一定與網站的功能相沖突，但它看起來很sl looking。背面可見性在子元素中製作文本模糊

我試圖通過代碼更改爲這個來解決問題：

http://jsfiddle.net/QPbJL/

雖然這解決這一切的Bug多多，現在我的文字是模糊的，過渡否則中。我試過添加-webkit-backspace-visibility：none;到.HexDesc，因爲這是文本的直接容器。

.HexIn2 { 
overflow: hidden; 
width: 100%; 
height: 100%; 
-webkit-backface-visibility:hidden; 

-webkit-background-size: 125%; 
-moz-background-size: 125%; 
background-size: 125%; 
visibility: visible; 

-webkit-transform: rotate(-60deg); 
-moz-transform: rotate(-60deg); 
-o-transform: rotate(-60deg); 
-ms-transform: rotate(-60deg); 
transform: rotate(-60deg); 
transition: all 0.5s ease; 
} 

    .HexDesc { 
    padding: 3px; 0px 3px 0px; 
    -webkit-backface-visibility:none !important; 
    background: #ffffff; 
    color:#000; 
    margin-top:106px; 
    height: 81px; 
    font-family: 'PT Sans Narrow', sans-serif; 
    line-height:85%; 
    letter-spacing:1px; 
    font-size: 13px; 
    }

但是，這沒有影響。我也嘗試在那裏投擲「！important」，試圖讓它在該div中的其他所有內容中重複使用，然後再次嘗試！就像背面的可視性完全沒有任何影響一樣，它就像HexDesc容器中的任何東西！這是非常令人沮喪的：C我想知道是否有人知道爲什麼會發生這種情況，而且我有辦法解決它？

來源

2014-05-20 SarahGrace

「中間」值通常是這種情況。對於旋轉，您只會在0,90,180,270,360 ...處得到模糊...這是瀏覽器本身的錯誤。您可能會注意到這適用於css中的很多事情（例如，不透明度在不是1或0時通常具有涓滴效應）。

在你的情況，你的jsfiddle，如果更換所有120deg與180deg和所有60deg與90deg，它會很好地工作。（意思是沒有模糊，但是你不再得到六角形）。對於三角形，我建議使用這個邊界黑客來製作它們（http://apps.eky.hk/css-triangle-generator/）。你可以得到相同的結果。

對於「暫時失調」，這也是來自Chrome（以及其他瀏覽器，我不知道）的已知錯誤。即使你去Gmail或YouTube，你仍然會看到這種情況。

來源

2014-05-20 23:56:00 Sheraff

所以沒有辦法解決這個問題，而不刪除我的十六進制代碼，因爲它是目前？：c bummeeeeeeer。但是，這是一個更新的東西，不是。我應該期待像這樣的錯誤^^;並不意味着我不會熱切希望有更好的一天！我只是將事情切換到基於邊框的六角形樣式。感謝Florian的支持，我很感激！ – SarahGrace

是的，所有前綴（-webkit-，-moz -...）值仍處於實驗狀態，因此您可以預期扭結。 – Sheraff

我不知道該怎麼做。爲了實驗的目的，我點擊了綠色的複選標記，希望那是它？大聲笑，讓我知道如果還有其他事情我應該做，以驗證它。 – SarahGrace

背面可見性在子元素中製作文本模糊

回答

相關問題