4

嗨，一旦获得缩放，我正在实现瓷砖的翻转。

我无法将 css 添加到我在 jquery 中添加的新类中。

我需要一些帮助。用例是，一旦您将鼠标悬停在图块上，它就会缩放，然后我在点击图块时添加一个新类，我为此添加了 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;
}

查询：

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

演示链接

4

2 回答 2

4

看这段代码：DEMO

我在你的 html 和 css 中添加了一些类和更改：

CSS：

.box-container{
    width:166px;
    height:172px;

}

.box-container .box.clicked .back{
    opacity:1;
}
.box-container .box.clicked .front{
    opacity:0;
}

.box-container .box.clicked{
    -webkit-transform:scaleY(-1);
}
.face{
    transition: all 0.5s linear;
}

查询：

$(".box").click(function(){
    $(this).toggleClass("clicked");
});
于 2013-11-15T07:10:04.917 回答
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 回答