瓦片翻转

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

- user1853128

Answer 1

看一下这段代码：演示

我在你的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");
});

- Mohsen Safari

Answer 2

我在你的JSFiddle上做了一些修改，可以看看这个分支：http://jsfiddle.net/u3z6Y/6/

基本上我所做的是：

• Applying a class on the wrapper instead of the box to be able to target the flipped versions of front and back:

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

• Targeting both the flipped and the non-flipeed version from 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;
  }
  

- Scorchio

---

嗨，完整的瓷砖应该翻转，然后背面的文本应该可见。 - user1853128

你能帮我一下吗？我完全卡住了。 - user1853128