如何通過使用css轉換來避免文本混亂

我嘗試通過使用帶轉換的文本轉換來旋轉文本。在Firefox瀏覽器中發生了一個小混蛋。檢查下面的鏈接，通過鼠標懸停文字，旋轉結束可以看到輕微的混蛋，如何避免這種情況？如何通過使用css轉換來避免文本混亂

.rot_pos{ 
    margin:100px auto; 
    text-align:center; 
    } 
.rotate{ 
    font-size:30pt; 
    font-weight:bold; 
    display:inline-block; 
    transform:rotate(0deg); 
    -moz-transition:1s; 
    transition:1s; 
} 
.rotate:hover{ 
    transform: rotate(-180deg); 
    -moz-transform: rotate(-180deg); 

} 

<div class="rot_pos"> 
<div class="rotate">Sample Text</div> 
</div>

http://jsfiddle.net/es86wh1p/

任何其他溶液??

這隻發生在Firefox。

來源

2015-02-07 xcoder new

雖然我沒有關於如何解決此問題的直接答案，但是看起來div的邊界框在懸停時正在修改，因此'挺舉'是由懸停/正常狀態的更改引起的。 – 2015-02-07 12:23:23

@DamianNikodem是因爲DIV嗎？如果我使用任何其他元素，它會停止這種行爲？即使我嘗試了SPAN和其他一些元素，但是Firefox以相同的方式渲染它。這個問題屬於瀏覽器還是html？ – 2015-02-08 11:52:46

我在js-fiddle中玩了一段小小的代碼，它幾乎看起來像是firefox中的一個bug。針對這種情況的快速調試技巧是啓用邊框並設置不同的顏色。

我能找到一個解決方案，但它是如此令人難以置信的hackey，這讓我想起了90年代和事實，Mozilla的Firefox從網景代碼庫的骨灰上升。

首先，我設置了一個父/子標籤，當鼠標進入rot_pos div時，「應該」導致文本旋轉。當鼠標碰到正在旋轉的盒子時（這導致鼠標快速離開時，您可以通過從rot_pos中移除填充來測試此操作），這仍然導致文本「陷阱」

設置旋轉的Z順序爲-2顯示rotate：hover觸發器在另一個div「後面」時未被觸發。所以快速的懶惰修復將會擴大rot_pos的大小，以便它完全覆蓋旋轉的文本。

這使我： http://jsfiddle.net/rwa1pq2v/

.rot_pos{ 
    margin:100px auto; 
    text-align:center; 
    border: 1px solid black; 
    padding: 100px 20px 100px 20px; 
    } 
.rot_pos > .rotate {  
    font-size:31pt; 
    font-weight:bold; 
    display:inline-block; 
    transform:rotate(0deg);   
    transition:1s; 
    border: 1px solid black;  
    background: green;  
} 
.rot_pos:hover > .rotate {   
    transform: rotate(-180deg); 
    -moz-transform: rotate(-180deg);   
} 

.rotate { 
    z-index: -2; 
} 
.rotate:hover { 
    background: pink;  
}

這樣做的問題是，當鼠標進入外側區域旋轉被觸發。因此，知道根據z順序在「上方」的div將防止下面div的觸發，我在頂部放置了另外2個div，可以看作是紅色和藍色，其中0.5的不透明度爲0.5下面的例子：

http://jsfiddle.net/non45qy2/

隨着規模的一些懶惰的手擺弄，以確保它們完全覆蓋，我們有我的最終解決方案的觸發區域..

爲了改善這一點，我們也可以降另外2 div來掩蓋2個剩餘的白色區域（並且修補被遮蓋區域的填充），因此您不必抵消如此大的數量。

如果不是凌晨1點40分我會提出這個問題作爲與Mozilla的錯誤，並希望它在下一個版本中得到解決。

來源

2015-02-08 14:40:58

感謝您的詳細回覆，我也想過將此問題提交給Firefox。等着瞧... – 2015-02-13 07:06:20

如何通過使用css轉換來避免文本混亂

回答

相關問題