1

これは、私がやろうとしていることのフィドルの例です。

クリック時に 2 つの div を回転させるために、jQuery トランジットと CSS3 3D トランジションが使用されています。フィドルを見ると、「回転」をクリックするとdivのパースペクティブが変更されるため、「回転バック」が表示されます。ファンキーな z-indexing またはポジショニングが行われているように見えるため、'rotate back' はクリックできません。

HTML

<div class="masthead">
  <div class="face face-1"><span class="rotate">rotate</span></div>
  <div class="face face-2"><span class="rotate-back">rotate back</span>
</div>

JS

$(document).ready(function () {
  $(".rotate").click(function () {
    $(".masthead").transition({
        perspective: '0',
        rotateX: '90deg',
        duration: 250
    });
});
    $(".rotate-back").click(function () {
    $(".masthead").transition({
        perspective: '0',
        rotateX: '-90deg',
        duration: 250
    });
  });
});

CSS

.masthead {
    -webkit-animation-timing-function: ease-in-out;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 22px 22px 0;
}
.masthead .face {
    height: 44px;
    position: absolute;
    width: 100%;
}
.masthead .face-1 {
    background: red;
    -webkit-transform: translateZ(22px);
}
.masthead .face-2 {
    background: aqua;
    -webkit-transform: rotateX(-90deg) translateZ(22px);
}

どんな助けでも大歓迎です、ありがとう！

4

1 に答える 1

0

赤が青の上に来ており、その逆も同様です。ポインター イベントを使用して、クリックがターゲット要素に到達できるようにします。

  $('.face-1').css('pointer-events', 'none');
  $('.face-2').css('pointer-events', '');

これはあなたが念頭に置いていたことですか: http://jsfiddle.net/e344M/14/

于 2013-04-25T22:11:18.460 に答える