使用Java脚本编写某个函数

Question

http://jsfiddle.net/cjLm77ek/

在这个示例中，我想在java脚本代码中添加一些内容，这样当我再次重新单击翻转按钮时，它会翻转回原始表单。 我该怎么办？我应该将什么添加到java脚本代码中？

style.css

Answer 1

最简单的方法是切换课程：

＆＃13;

＆＃13;

$(document).ready(function() {

    $("#flip_content").click(function() {
        $("#f1_card").toggleClass('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;
}

/* 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;
}

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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;

Answer 2

我认为你正在使用javascript，你应该只使用css进行转换，使用javascript来触发动画。

现在所有javascript负责切换卡元素上的类，浏览器处理其余的。

$(function() {
  $("#flip_content").click(function() {
    $("#f1_card").toggleClass('rotated')
  })
})

#flip_content {
  height: 200px;
  width: 200px;
  perspective: 1200px;
  perspective-origin: 50% 50%;
}
#f1_card {
  height: 200px;
  width: 200px;
  background: red;
  transition: 1s all;
}
#f1_card.rotated {
  transform: rotateX(180deg);
  box-shadow: -5px 5px 5px #aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flip_content">
  <div id="f1_card"></div>
</div>