CSS 3D多維數據集-webkit轉換

Question

我能夠使用在線示例在css中重現一個旋轉的3D多維數據集。現在我正在分析代碼，以便了解代碼的含義並瞭解代碼的工作原理。 但是有一件事我不明白，我知道「過渡」屬性可以讓我在從一種風格轉換到另一種風格時添加效果。 （例如更改元素的寬度）但是在代碼中可以找到here它以我不明白的方式使用。

-webkit-transition: -webkit-transform 2s linear; 

如果我離開這片碼出立方體外觀和行爲完全一樣的，我不明白它做什麼，如果它是必要的。

謝謝你的幫助！

Answer 1

-webkit-是在WebKit瀏覽器上使用的不需要完全支持並處於測試/實驗階段的屬性的前綴。在CSS世界中還有一些其他的前綴。其中一些比較流行的是：-moz-（Firefox），-o-（Opera）和-ms-（Internet Explorer）。

這裏-webkit-transition:是以WebKit爲前綴的transition屬性，而-webkit-transform是以WebKit爲前綴的transform屬性。

如果我們看看我可以使用...來支持瀏覽器，我們會在某些移動瀏覽器上看到the transition property需要前綴-webkit-。我們還會看到，the transform property需要-webkit-前綴才能在很多WebKit瀏覽器上工作。

爲了給我們的transform財產在Android瀏覽器中transition，例如，我們需要使用：

-webkit-transition: -webkit-transform 2s linear; 

在瀏覽器充分支持transform和transition，就可以達到同樣的效果使用：

transition: transform 2s linear; 

爲了安全起見，我們也能滿足需要的transform財產WebKit的瀏覽器的前綴，但可能因爲放棄了前綴Ø n個transition屬性 - 儘管這可能是不必要的：

transition: -webkit-transform 2s linear; 

---

我不明白的事情是什麼「改造2S線性」添加到多維數據集。

這會向分配給多維數據集的transform屬性添加一個兩秒的線性轉換（動畫）。如果沒有這個變換屬性會立即改變，但是這個變化是在兩秒鐘內逐漸變化的。

這是JSFiddle demo我掀起了transition財產的行動。這裏，我們的第一個數字在懸停時立即從紅色變爲綠色，但我們的第二個數字需要2秒才能更改。

您鏈接的代碼中的轉換看起來對對象沒有任何影響。