Javascript 如何更改此翻转卡，使其在单击时自动旋转？_Javascript_Jquery_Html_Css

Javascript 如何更改此翻转卡，使其在单击时自动旋转？

javascript jquery html css

Javascript 如何更改此翻转卡，使其在单击时自动旋转？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想做垂直翻转的抽认卡，问题是将前卡换成后卡的属性在悬停状态下工作。我不知道如何通过单击将前卡换成后卡。有什么想法吗 <!doctype html> <html lang="en"> <head><meta charset="UTF-8"> <title>Flipping Animation with CSS</title><link href='http://fonts.googleapis.com/css? fam

我想做垂直翻转的抽认卡，问题是将前卡换成后卡的属性在悬停状态下工作。我不知道如何通过单击将前卡换成后卡。有什么想法吗

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8">
<title>Flipping Animation with CSS</title><link href='http://fonts.googleapis.com/css? family=Kelly+Slab|Oleo+Script+Swash+Caps:400,700|Amaranth:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="page">

        <div class="vertical-flip-container flip-container floatR" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
                <div class="front">
                    The front face
                </div>
                <div class="back">
                    The back face
                </div>
                <div class="clear"></div>
            </div>
        </div>

    </div>
</div>

ontouchstart

不适用于所有设备

尝试单击

onclick

您可以通过侦听单击事件来添加和删除翻转环绕两侧的div的类：

html

<div class="flip-container">
    <div id="card" class="flipper">
        <div class="front">
            The front face
        </div>
        <div class="back">
            The back face
        </div>
    </div> 
</div>

css

var card = document.getElementById('card');

card.addEventListener('click', function() {
    if (!this.classList.contains('on')) {
        this.classList.remove('off');
        this.classList.add('on');
    } else {
        this.classList.remove('on');
        this.classList.add('off');
    }
});

.on {
    -webkit-transform: rotateX(-180deg);
}

.off {
    -webkit-transform: rotateX(0deg);
}

我在这里添加了一个工作示例：

.on {
    -webkit-transform: rotateX(-180deg);
}

.off {
    -webkit-transform: rotateX(0deg);
}