爲什麼行內元素會在它被徘徊的時候將其轉換回原來的位置？

我嘗試將元件時，它可以盤旋，像：爲什麼行內元素會在它被徘徊的時候將其轉換回原來的位置？

span{ 
 
    transition: transform 0.35s; 
 
} 
 
span:hover{ 
 
    transform: translateY(30px); 
 
}

<span>test</span>

在IE瀏覽器，它工作得很好，但不能在Chrome和Firefox.It將返回到原來的位置。

我發現，如果添加display:block跨越，這將罰款（也有小問題與Firefox），但爲什麼呢？有沒有更好的方法來做到這一點？

來源

2015-07-21 Zhuo

一種可變形元素是這些類別中的一個單元內：

其佈局由CSS盒模型控制的元素，它是塊級或原子行內元素，或者其顯示屬性計算到錶行，表列的基團，表頭的基團，表英尺的基團，表細胞，或表字幕[ CSS21]

在SVG命名空間的元素，而不是由CSS盒模型，其具有的屬性變換，「patternTransform」或gradientTransform [SVG11]支配。

從w3 specification。

所以inline-block元素，inline-table元件，replaced inline-level elements（認爲img，video等）和可能的其它atomic inline-level element是可變形的行內的元素。

如果您將範圍display或者block,inline-block或inline-table，它將被視爲可變形的元素，否則它將不會。未指定瀏覽器使用不可變形元素的內容。

span{ 
 
    transition: transform 0.35s; 
 
    display:inline-block; 
 
} 
 
span:hover{ 
 
    transform: translateY(30px); 
 
}

<span>test</span>

來源

2015-07-21 16:52:25

我想它返回到原來的位置，因爲它肢體動作和翻譯後，鼠標不再徘徊的元素。

一對夫婦的想法：

1）如果你想要的元素，以保持移動，而鼠標懸停，但返回當鼠標離開，也許你可以在padding，而不是translate，這種方式，做一個CSS3過渡元素含量會移動，但在DOM本身的框將會保持:hover效果

2）如果你想要的元素留在自己的位置，而不是徘徊後返回，你可能會需要使用Javascript功能來添加類後元素盤旋和風格類

祝你好運！

來源

2015-07-21 16:22:18 CreMedian

我希望能提供幫助。與Firefox的問題是，平移Y只適用於div的，因此：

把你跨度一個div

來源

2015-07-21 16:38:36 step

爲什麼行內元素會在它被徘徊的時候將其轉換回原來的位置？

回答

相關問題