单击按钮翻转div的内容 [英] Flip content of a div on clicking a button

问题描述

我正在学习翻转div内容的这种3D效果.悬停时，下面的div代码可完美运行.但是我想要的是，如果某人仅单击按钮翻转，则该div翻转应该可以工作.我只希望单击按钮时才具有这种翻转效果，而不是将鼠标悬停或其他任何东西时.

I am learning this 3D effect of flipping content of a div. On hover the div code below works perfectly. But What I want is that, if someone only click on the button flip this flipping of div should work. I want this flipping effect only if button is clicked not if hover or anything.

    <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>

推荐答案

您可以使用JavaScript处理button上的点击事件.

You could use JavaScript to handle click events on button.

content.classList.toggle('flip')将添加类.flip(如果不存在)，并将其移除(如果存在).

content.classList.toggle('flip') will add the class .flip, if it doesn't exist and will remove if it exists.

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>

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

You could keep track of clicks, if the count is divisible by 2, add the class .flip, else remove it.

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>

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返回分配给该元素的所有class es的数组.

.classList returns an array of all classes assigned to the element.

例如，

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

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

---

.className返回分配给该元素的所有class es(逗号分隔)的字符串.

---

.className returns a string of all classes(comma seperated) assigned to the element.

例如，

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

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

这篇关于单击按钮翻转div的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！