3D CSS Transform - transform：rotateX（180deg）;

Question

我試圖通過沿x軸翻轉它顛倒（180度）來懸停圖片。

就像here

除了我不能得到它出於某種原因。

img { 
    transition:all 2s ease-in-out; 
    perspective: 800px; 
    perspective-origin: 50% 100px; 
} 

img:hover { 
    transform:rotateX(180deg); 
} 

Answer 1

據this page，Chrome仍然會需要-webkit前綴。

您錯過了瀏覽器前綴。

img { 
    -webkit-transition:all 2s ease-in-out; 
    -webkit-perspective: 800px; 
    -webkit-perspective-origin: 50% 100px; 
} 

img:hover { 
    -webkit-transform:rotateX(180deg); 
} 

這也意味着您需要爲其各自的瀏覽器添加其他瀏覽器前綴。如果您不想使用瀏覽器前綴，您可以使用由Lea Verou調用的名爲prefixfree.js的插件來爲您提供所有這些。