点击按钮时翻转一个div的内容

Question

我正在学习如何翻转

的内容来实现3D效果。当鼠标悬停在

上时，以下代码可以完美地工作。但是我想要的是，如果有人只点击按钮，就可以实现

的翻转。我希望只有在单击按钮时，而不是鼠标悬停或其他情况下才能实现这种翻转效果。

    <style>
    #f1_container {
      position: relative;
      margin: 10px auto;
      width: 450px;
      height: 281px;
      z-index: 1;
    }
    #f1_container {
      perspective: 1000;
    }
    #f1_card {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: all 1.0s linear;
    }
    #f1_container:hover #f1_card {
      transform: rotateX(180deg);
      box-shadow: -5px 5px 5px #aaa;
    }
    .face {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
    }
    .face.back {
      display: block;
      transform: rotateX(180deg);
      box-sizing: border-box;
      padding: 10px;
      color: white;
      text-align: center;
      background-color: #aaa;
    }
    </style>

    <div id="f1_container">
    <div id="f1_card" class="shadow">
      <div class="front face">
    lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />
    lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />
    lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />
      </div>
      <div class="back face center">
        <p>This is nice for exposing more information about an image.</p>
        <p>Any content can go here.</p>
      </div>
    </div>
    </div>
<button class="btn btn-primary" id="flip_content">Flip</button>

- asdlfkjlkj

Answer 1

你可以使用JavaScript来处理按钮的点击事件。

第一种方法：使用.classList.toggle()。 content.classList.toggle('flip')会添加类.flip，如果它不存在，则会删除。

var btn = document.getElementById('flip_content');
var content = document.getElementById('f1_card');
btn.onclick = function() {
  content.classList.toggle('flip');
}

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
.flip {
  transform: rotateX(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateX(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}

<div id="f1_container">
  <div id="f1_card" class="shadow">
    <div class="front face">
      lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />
    </div>
    <div class="back face center">
      <p>This is nice for exposing more information about an image.</p>
      <p>Any content can go here.</p>
    </div>
  </div>
</div>
<button class="btn btn-primary" id="flip_content">Flip</button>

第二种方法：使用 .classList.add() 和 .classList.remove()。

您可以跟踪点击次数，如果计数可被 2 整除，则添加类 .flip，否则删除。

var btn = document.getElementById('flip_content');
var content = document.getElementById('f1_card');
var c = 0;
btn.onclick = function() {
  (c++ % 2 == 0) ? content.classList.add('flip'): content.classList.remove('flip');
}

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
.flip {
  transform: rotateX(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateX(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}

<div id="f1_container">
  <div id="f1_card" class="shadow">
    <div class="front face">lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />
    </div>
    <div class="back face center">
      <p>This is nice for exposing more information about an image.</p>
      <p>Any content can go here.</p>
    </div>
  </div>
</div>
<button class="btn btn-primary" id="flip_content">Flip</button>

---

3^rd Approach: Using .className.

var btn = document.getElementById('flip_content');
var content = document.getElementById('f1_card');
var c = 0;
btn.onclick = function() {
  content.className = (c++ % 2 == 0) ? content.className + ' flip' : content.className.split(' ')[0];
}

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
.flip {
  transform: rotateX(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateX(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}

<div id="f1_container">
  <div id="f1_card" class="shadow">
    <div class="front face">lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />
    </div>
    <div class="back face center">
      <p>This is nice for exposing more information about an image.</p>
      <p>Any content can go here.</p>
    </div>
  </div>
</div>
<button class="btn btn-primary" id="flip_content">Flip</button>

---

.classList返回一个数组，其中包含分配给元素的所有类。

例如，

<div id="div" class="one two three four five"></div>

document.getElementById('div').classList
//['one', 'two', 'three', 'four', 'five']

---

.className 返回一个字符串，其中包含元素分配的所有 class（逗号分隔）。

例如，

<div id="div" class="one two three four five"></div>

document.getElementById('div').className
//'one two three four five'

---

- Weafs.py

---

嘿！这在IE或Chrome中不起作用。我该如何使其在这些浏览器中起作用？ - asdlfkjlkj

@asdlfkjlkj - 或者你可以使用.add()和.remove()。这里有一个例子。 - Weafs.py

@asdlfkjlkj - 或者您可以使用这种方法。 - Weafs.py

@asdlfkjlkj - 你可以将第一个示例简化为这个，将第二个示例简化为这个。 - Weafs.py

Answer 2

你需要添加JS，这里使用jQuery来触发类的变化，而不是使用hover

$(function(){
    $('#flip_content').click(function(e){
        $('#f1_container').addClass('flip');
    });
});

将悬停选择器更改为类 .flip

#f1_container.flip #f1_card {
    transform: rotateX(180deg);
    box-shadow: -5px 5px 5px #aaa;
}

- Juank

Answer 3

你可以使用一些 JavaScript 来实现这个功能，像这样：

这里有一个可工作的例子：http://jsfiddle.net/cjLm77ek/

JavaScript (jQuery)：

$(document).ready(function() {

    $("#flip_content").click(function() {

        $("#f1_card").css("transform", "rotateX(180deg)");
        $("#f1_card").css("box-shadow", "-5px 5px 5px #aaa");

    });

});

HTML：

<div id="f1_container">
    <div id="f1_card" class="shadow">
        <div class="front face">lets see if anything happen
            <br />lets see if anything happen
            <br />lets see if anything happen
            <br />lets see if anything happen
            <br />lets see if anything happen
            <br />lets see if anything happen
            <br />lets see if anything happen
            <br />lets see if anything happen
            <br />lets see if anything happen
            <br />lets see if anything happen
            <br />lets see if anything happen
            <br />lets see if anything happen
            <br />
        </div>
        <div class="back face center">
            <p>This is nice for exposing more information about an image.</p>
            <p>Any content can go here.</p>
        </div>
    </div>
</div>
<button class="btn btn-primary" id="flip_content">Flip</button>

CSS：

#f1_container {
    position: relative;
    margin: 10px auto;
    width: 450px;
    height: 281px;
    z-index: 1;
}
#f1_container {
    perspective: 1000;
}
#f1_card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 1.0s linear;
}

/* disable hover change
#f1_container:hover #f1_card {
    transform: rotateX(180deg);
    box-shadow: -5px 5px 5px #aaa;
}
*/

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.face.back {
    display: block;
    transform: rotateX(180deg);
    box-sizing: border-box;
    padding: 10px;
    color: white;
    text-align: center;
    background-color: #aaa;
}

- Software Guy

Answer 4

您可以只使用复选框和 CSS 实现此功能：

您还可以对标签进行自定义样式以使其看起来像一个按钮，并将其放置在 HTML 中的任何位置，但请注意我在 f1_container 中添加的复选框。它应该在您想要翻转的元素之前。

这种解决方案有一定的局限性，仅适用于现代浏览器。

JSFiddle 输出：http://jsfiddle.net/7h20gryw/

    #f1_container {
      position: relative;
      margin: 10px auto;
      width: 450px;
      height: 281px;
      z-index: 1;
    }
    #f1_container {
      perspective: 1000;
    }
    #f1_card {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: all 1.0s linear;
    }
    input[type=checkbox]:checked ~ #f1_card {
      transform: rotateX(180deg);
      box-shadow: -5px 5px 5px #aaa;
    }
    .face {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
    }
    .face.back {
      display: block;
      transform: rotateX(180deg);
      box-sizing: border-box;
      padding: 10px;
      color: white;
      text-align: center;
      background-color: #aaa;
    }
    input[type=checkbox] {
       position: absolute;
       top: -9999px;
       left: -9999px;
       /* For mobile, it's typically better to position checkbox on top of clickable
          area and turn opacity to 0 instead. */
    }
    input[type=checkbox] + label {
      color: #ccc;
      font-style: italic;
    } 
    input[type=checkbox]:checked + label {
      color: #f00;
      font-style: normal;
    } 

 <div id="f1_container">
     <input type="checkbox" id="ossm" name="ossm"> 
    <div id="f1_card" class="shadow flipme">
      <div class="front face">
    lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />
    lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />
    lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />
      </div>
      <div class="back face center">
        <p>This is nice for exposing more information about an image.</p>
        <p>Any content can go here.</p>
      </div>
    </div>
    </div>

<label for="ossm">Flip</label> 

- Uncle Aaroh