奇怪的z-index與旋轉Y在Safari，但無法在Chrome和Firefox

Question

我這個問題，我做了很多嘗試得到它的工作的......

看看我http://jsfiddle.net/9LjB6/

我.. 相對於絕對地址更改位置 將z-index更改爲1000,1000000等... 試圖用jquery更改它 試圖將其內聯放在標記 中，但它不起作用。

我當鼠標移到是

$(this).css({ 
    '-webkit-transform':'scale(1.1,1.1)', 
    'transform':'scale(1.1,1.1)', 
    '-o-transform':'scale(1.1,1.1)', 
    '-ms-transform':'scale(1.1,1.1)', 
    '-moz-transform':'scale(1.1,1.1)', 
}); 
$('.ico_competence').css({ 
    '-webkit-transform':'perspective(250px) rotateY(-5deg)', 
    'transform':'perspective(250px) rotateY(-5deg)', 
    '-o-transform':'perspective(250px) rotateY(-5deg)', 
    '-ms-transform':'perspective(250px) rotateY(-5deg)', 
    '-moz-transform':'perspective(250px) rotateY(-5deg)', 
}); 
$('.ico_innovation').css({ 
    '-webkit-transform':'perspective(250px) rotateY(5deg)', 
    'transform':'perspective(250px) rotateY(5deg)', 
    '-o-transform':'perspective(250px) rotateY(5deg)', 
    '-ms-transform':'perspective(250px) rotateY(5deg)', 
    '-moz-transform':'perspective(250px) rotateY(5deg)', 
}); 

什麼做到這一點的行動？

非常感謝您的幫助和建議

Answer 1

你需要以及轉換Z值...因爲你旋轉以Y軸左邊的對象到它，它的右邊緣具有更高的Z值比鼠標結束時的「平坦」div更大。

我已經修改了你的例子在Safari這裏工作： http://jsfiddle.net/JZeuY/

的關鍵部分是'-webkit-transform':'translate3d(0, 0, 100px)'