我想让翻转抽认卡垂直，问题是将前卡更改为后卡的属性在悬停时有效。我不知道如何通过单击将前卡更改为后卡。有任何想法吗？
<!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 */ }
最佳答案
您可以通过监听点击事件来添加和删除翻转包裹两侧的 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
关于javascript - 如何更改此翻转卡以在单击时自行旋转？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28593647/