Question

嗨我正在实现一旦它变焦就实现了它的翻转。

我无法将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;
}

JQuery的：

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

Demo Link

Answer 1

查看此代码：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;
}

<强> JQuery的：

$(".box").click(function(){
    $(this).toggleClass("clicked");
});

Answer 2

我对你的JSFiddle做了一些修改，请看这个fork：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;
}

翻转瓷砖

2 个答案: