爲什麼我的轉換變換很奇怪？

因此，對於我的俱樂部日程表，我試圖做一個過渡性的比賽，在盤旋時td會變大。但是，當我這樣做時，雖然內部的文字變得更大，但框並不真正增長。另外，彩色盒子在頂部和/或底部保持較大的情況下具有這種奇怪的後效果。這裏是小提琴（我是新來的這一點，所以如果鏈接不起作用，我道歉）：爲什麼我的轉換變換很奇怪？

http://jsfiddle.net/glenohumeral13/Lcs68/

，這裏是，我認爲，是相關代碼：

td { 
    width: 35px; 
    text-align:center; 
    font-family: Helvetica, Arial; 
    font-size: 16px; 
    font-weight: 100; 
    transition: transform 1s ease-in; 
} 
td:hover { 
    -ms-transform: scale(1.2,1.2); 
    -webkit-transform: scale(1.2,1.2); 
    -moz-transform: scale(1.2,1.2); 
    transform: scale(1.2,1.2); 
}

我真的很感激，如果你能解決這個問題，你也可以花點時間爲什麼解決方案有效，因爲我希望能夠在將來自己解決這個問題和相關問題。謝謝！編輯：感謝大家爲您的迅速反應！我嘗試了所有的解決方案，但一旦過渡結束，盒子就會變白。特別是出於某種原因，這可能只是我的電腦嗎？編輯：無所謂：問題解決了！謝謝大家！最後編輯：對不起！我使用的是Chrome，如果它現在對任何人都有幫助。

來源

2014-05-15 glenohumeral13

在其瀏覽器是你看到這些奇怪的效果？它適用於Firefox和IE瀏覽器，在Chrome瀏覽器中完全沒有問題。 – BoltClock

如果您所指的問題發生在Chrome中，只需添加'transition：-webkit-transform 1s ease-in' ..您需要轉換'-webkit'前綴的版本。這似乎是修復.. http://jsfiddle.net/6CX7r/ –

@Josh Crozier：這提醒了我......我一直有困難協調跨瀏覽器的支持和供應商前綴時使用'transition'在與使用前綴的其他轉換屬性結合使用。但我確實發佈了我的發現 - 尤其是Chrome瀏覽器非常奇怪：http://stackoverflow.com/questions/22457222/ie10-11-uses-transform-webkit-transform/22457802#22457802我懷疑它沒有解決這個問題已經完全解決，但是前綴始終是首先要解決的問題。 – BoltClock

-1

LIVE DEMO

更新：

如今for modern browser (>= IE10)你不需要前綴的transform財產在transition聲明。

td { 
    width: 35px; 
    text-align: center; 
    font-family: Helvetica, Arial; 
    font-size: 16px; 
    font-weight: 100; 
    transition: /*transform*/ 1s ease-in; 
}

（問題是通過去除transform所以它獲得默認值all解決）

... transition: all 1s ease-in; ...

來源

2014-05-15 01:47:56 aldanux

而且修復了什麼問題以及如何解決？ –

@torazaburo - 前綴問題......但現在它的不相關...注：（這個問題將近3歲） – aldanux

爲什麼我的轉換變換很奇怪？

回答

相關問題