单击按钮时翻转div的内容

时间：2014-12-28 00:25:32

标签： javascript jquery html css

我正在学习翻转div内容的3D效果。在悬停时，下面的div代码完美无缺。但我想要的是，如果有人只点击按钮翻转这个翻转div应该工作。我想要这种翻转效果只有在点击按钮时才会悬停或任何东西。 

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

4 个答案:

答案 0 :(得分：5)

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

1 st 方法：使用.classList.toggle()。

content.classList.toggle('flip')会添加课程.flip，如果该课程不存在，则会删除该课程。

＆＃13;
＆＃13; 
var btn = document.getElementById('flip_content');
var content = document.getElementById('f1_card');
btn.onclick = function() {
  content.classList.toggle('flip');
}
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 nd 方法：使用.classList.add()和.classList.remove()。

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

＆＃13;
＆＃13; 
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');
}
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 rd 方法：使用.className。

＆＃13;
＆＃13; 
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];
}
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

.classList返回分配给该元素的所有class es的数组。

例如，

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

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

.className返回分配给元素的所有class es（逗号分隔）的字符串。

例如，

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

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

答案 1 :(得分：0)

你需要添加js，这里用jquery显示来触发类更改而不是悬停

$(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;
}

答案 2 :(得分：0)

您可以像这样使用一些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;
}

答案 3 :(得分：0)

您可以使用复选框仅使用CSS实现此目的：

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

此解决方案的局限性在于它仅适用于现代浏览器。

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

＆＃13;
＆＃13; 
    #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;
    }
＆＃13; 
 <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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题