如何使用-moz-transform永久更改CSS元素？

 var transform = ['scale(' + scale + ')']; 
     $.merge(transform, ['rotate(' + rotate + 'deg)']); 
     $(this).css(-moz-transform, transform.join(' '));

這個代碼塊在生成事件時執行，新的縮放和旋轉被添加到css元素，但是每當再次生成相同的事件時，css元素會將自身重置爲原始大小和位置。在第二次重置之後執行。我想消除將元素重置爲原始大小和位置。如何在第一次觸發事件時將其更改爲永久性的，並在觸發事件時在其上進行構建第二次？請幫助提前致謝如何使用-moz-transform永久更改CSS元素？

來源

2011-06-06 Sai

你是如何設置'縮放'和'旋轉'的？ – Jeff 2011-06-06 20:42:04

縮放和旋轉只有數值！ – Sai 2011-06-06 20:47:10

此代碼沒有任何問題，但請記住，您將以絕對項設置scale和rotate，而不是相對於其「初始」狀態。

因此，每次執行代碼時，元素的-moz-transform屬性都將被覆蓋。如果您想根據當前狀態對其進行旋轉和縮放，則必須跟蹤scale和rotate值，並根據需要進行調整。例如，如果此代碼處於循環中，則可以執行rotate=rotate+5;或類似的操作。

您還可以使用($this).css('-moz-transform')從CSS請求這些屬性，解析該值以獲取所需的值，並相應地更新scale和rotate。

來源

2011-06-06 20:50:54 Jeff

@Jeff，謝謝，我明白我的錯誤，但是你能解釋一下如何使用（$ this）.css（' - moz-transform'）獲取值並解析它嗎？ – Sai 2011-06-06 21:04:02

好吧，我站好了。對於大多數屬性，可以使用$（this）.css（'width'）來返回寬度（例如「50px」），並且可以簡單地切掉'px'並使用它來增加變量。但是，當您要求-moz-transform時，FF會返回一個不容易分析的怪異矩陣表示。我認爲這只是一個錯誤，因爲它是一個「實驗性」的CSS屬性。既然如此，我會遵循我的第一個建議，並且每次設置它們時都要跟蹤「縮放」和「旋轉」，將它們存儲爲全局JS變量。 – Jeff 2011-06-06 21:47:22

好的，謝謝問題解決！ – Sai 2011-06-06 21:51:11

如何使用-moz-transform永久更改CSS元素？

回答

相關問題