4

こんにちは、ズームしたらタイルの反転を実装しています。

jquery に追加している新しいクラスに css を追加できません。

これに関して助けが必要です。ユースケースは、タイルにカーソルを合わせるとズームし、タイルをクリックして新しいクラスを追加し、そのためにcssを追加していますが、機能していません。最初は前面のテキストを表示する必要があります。タイルをクリックすると、前面のテキストが非表示になり、背面のテキストが表示され、その逆も同様です。これは私が試したことです：

HTML:

<div class="boxes"> 
        <div class="box"> 
            <div class="face front"> 
                Front
            </div> 
            <div class="face back"> 
                Back
            </div> 
        </div> 
    </div>

CSS:

.boxes {
    -webkit-transform: translateZ(0);
    position: relative;
    width: 600px;
    height: 700px;
    top: 0px;
}

.box {
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -moz-transition: all 0.5s cubic-bezier(0.0, 0.35, .6, 1.5);
    -o-transition: all 0.5s cubic-bezier(0.0, 0.35, .6, 1.5);
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
    width: 140px;
    height: 140px;
    font-family: Helvetica, sans-serif;
    text-align: center;
    padding: 13px 10px;
    margin: 0 5px;
    background-color: #fefefe;
    background: -moz-linear-gradient(90deg, #eee, #fff, #eee);
    background: -webkit-gradient(linear, left top, left bottom, from(#eee),
        color-stop(0.5, #fff), to(#eee) );
    border: 3px solid #e1e1e1;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 15px;
    cursor: pointer;

}
.box:hover {
  border-color: #e1e1e1;
  -webkit-box-shadow: #666 0px 0px 6px;
  -moz-box-shadow: #666 0px 0px 6px;
  box-shadow: #666 0px 0px 6px;
  background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), color-stop(0.5, #fff), to(#e1e1e1));
  -moz-transform: scale(1.1);  
          -o-transform: scale(1.1);  
     -webkit-transform: scale(1.1); 
             transform: scale(1.1);
}
.flip {
  -webkit-transform: rotatex(-180deg)!important;
}

.front {
  z-index: 1;
    cursor: pointer;
}
.back {
  -webkit-transform: rotatex(-180deg);
    color: black;
    cursor: pointer;
}

JQuery:

$('.box').click(function(e){
                alert('hai');
                $(this).addClass('flip').mouseleave(function(){
                    $(this).removeClass('flip');
                });
            });

デモリンク

4

2 に答える 2

2

私はあなたの JSFiddle にいくつかの変更を加えました。このフォークを参照してください: http://jsfiddle.net/u3z6Y/6/

基本的に私がしていることは

  • ボックスの代わりにラッパーにクラスを適用して、表と裏の反転バージョンをターゲットにできるようにします。

    $('.box').click(function(e){
   $('.boxes').toggleClass('flip');
   // ..
});

  • CSS からフリップ バージョンと非フリップ バージョンの両方をターゲットにする:

    .front {
  z-index: 1;
    cursor: pointer;
    -webkit-transform: rotatex(0deg)!important;
}
.back {
  -webkit-transform: rotatex(-180deg);
    color: black;
    cursor: pointer;
}
.flip .front {
    -webkit-transform: rotatex(-180deg)!important;
}
.flip .back {
    -webkit-transform: rotatex(0deg)!important;
}
于 2013-11-15T06:56:04.143 に答える