Question

我遇到了这个问题，我尝试了很多工作......

...我改变相对于绝对的位置将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值比鼠标结束时的“flat”div高。< / p>

我已修改您的示例以在Safari中工作： http://jsfiddle.net/JZeuY/

关键部分是'-webkit-transform':'translate3d(0, 0, 100px)'

奇怪的z-index在safari中使用rotateY但在chrome和firefox中没有

1 个答案: