0

私はこの問題を抱えていて、それを機能させるために多くの試みをしました...

私の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 )',
});

これは何が起こるのですか？

あなたの助けとアドバイスをありがとうございました

4

1 に答える 1

2

Z 値も変換する必要があります。オブジェクトを Y 軸で左に回転しているため、右端の Z 値は、マウスが置かれている「フラット」な div よりも高くなります。

ここでサファリで動作するようにあなたの例を修正しました: http://jsfiddle.net/JZeuY/

重要な部分は'-webkit-transform':'translate3d(0, 0, 100px)'

于 2013-01-03T00:40:20.147 に答える