javascript - 使用Java脚本编写特定功能

http://jsfiddle.net/cjLm77ek/

在这里的示例中，我想向Java脚本代码中添加一些内容，以便当我再次重新单击翻转按钮时，它会翻转回原始形式。
我该怎么办？我应该在Java脚本代码中添加什么？

$(document).ready(function() {
    $("#flip_content").click(function() {
        $("#f1_card").css("transform", "rotateX(180deg)");
        $("#f1_card").css("box-shadow", "-5px 5px 5px #aaa");
    });
});

最佳答案

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

$(document).ready(function() {

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

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

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