Question

我想翻转flashcard verticaly，问题是改变前卡到后卡的属性在悬停时起作用。我不知道怎么做才能通过点击将前卡换成后卡。有任何想法吗？

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

CSS

body {
    line-height: 1;
    font-family: 'Kelly Slab', cursive;
    font-weight: 400;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

h1, h2, h3, h4, h5, h6 { color: #3498db; margin: 10px 0; font-family: 'Amaranth', sans-serif; font-weight: 400; }
h2 { font-size: 2.5em; }
h3 { font-size: 1.4em }
.floatL { float: left; }
.floatR { float: right; }
.clear { clear: both;; line-height: 0; font-size: 0; display: block; }
p { line-height: 18px; color: #333; margin: 5px 0; font-size: 1em; }
a { text-decoration: none; color: #038823;}
a:hover { text-decoration: underline; color: #ee1821; }
.alignCenter { text-align: center; }

/**** App specific styles ***/
h1 { text-align: center; font-size: 1.5em; margin-bottom: 20px; }
#page { max-width: 960px; margin: 20px auto; }
#content { padding: 10px; background: #f4f4f4; }

.flip-container { -webkit-perspective:1000; width: 400px; }
.flipper { transition: 0.6s; -webkit-transform-style: preserve-3d; position: relative; height: 400px; }
.front, .back { width: 400px; height: 400px; position: absolute; left: 0; top: 0; -webkit-backface-visibility: hidden; color: #fff; text-shadow: 1px 1px #000; font-size: 2em; line-height: 400px; text-align: center; }
.back { -webkit-transform: rotateY(180deg); background: #3498db; }
.front { z-index: 2; background: #2ecc71; }
.flip-container:hover .flipper, .flip-container.hover .flipper { -webkit-transform: rotateY(180deg); }
.flip-container p { margin: 10px 0; text-align: center; }

.vertical-flip-container .back { -webkit-transform: rotateX(180deg); }
.vertical-flip-container:hover .flipper, .vertical-flip-container.hover .flipper { -webkit-transform: rotateX(-180deg); }
.vertical-flip-container .flipper { -webkit-transform-origin: 100% 213.5px; /* half of height */ }

Answer 1

ontouchstart不适用于所有设备。

https://msdn.microsoft.com/en-us/library/ie/dn792854(v=vs.85).aspx

尝试onclick

http://www.w3schools.com/jsref/event_onclick.asp

Answer 2

您可以通过侦听点击事件来添加和删除翻转包裹双方的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>

<强> JS

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');
    }
});

<强> CSS

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

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

我在这里添加了一个工作示例：http://jsbin.com/cazibe/2/edit?html,css,js,output

如何更改此翻转卡以自动旋转？

2 个答案: