我制作了翻转卡，当您将鼠标悬停在它们上时，它们就会翻转。但是，我做了一个链接/按钮，以便在单击它时将创建一个新的活动卡。无法做到这一点.....一些帮助将不胜感激...在这里也是新的！下面是我的活动挂图的html和css代码：
$(document).ready(function() {
$("#new").click(function() {
$("card effect__hover").clone().insertAfter(thi);
});
});html {
background: url(index_bg.jpg) no-repeat;
background-size: cover;
}
.card {
position: relative;
float: left;
width: 200px;
height: 200px;
text-align: center;
margin-top: 100px;
}
.card:nth-child(1) {
margin-top: 100px;
margin-left: 100px;
margin-right: 8px;
}
.card:nth-child(2) {
margin-top: 100px;
margin-right: 8px;
}
.card.effect__ADD {
margin-left: 8px;
}
.card__front,
.card__back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card__front,
.card__back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.card__front {
background-color: blue;
}
.card__back {
background-color: orange;
transform: rotateY(-180deg);
}
.card.effect__hover:hover .card__front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card.effect__hover:hover .card__back {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
.card.effect__ADD:hover .card__front {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.card.effect__ADD:hover .card__back {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
span > p {
margin-top: 80px;
font-family: Arial;
font-weight: bold;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Read</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="custom.js"></script>
<link href="read.css" rel="stylesheet">
</head>
<body>
<div class="card effect__hover">
<div class="card__front">
<span class="card__text"></span>
</div>
<div class="card__back">
<span class="card__text"></span>
</div>
</div>
</div>
<div class="card effect__hover">
<div class="card__front">
<span class="card__text"></span>
</div>
<div class="card__back">
<span class="card__text"></span>
</div>
</div>
<div class="card effect__hover">
<div class="card__front">
<span class="card__text"></span>
</div>
<div class="card__back">
<span class="card__text"></span>
</div>
</div>
<a href="" class="new">
<div class="card effect__ADD">
<div class="card__front">
<span class="card__text"></span>
</div>
<div class="card__back">
<span class="card__text"><p>Add Your Story</p></span>
</div>
</div>
</a>
</body>
</html>如果可以在jquery中完成，我将不胜感激
像在此JSFiddle中一样，我向添加了一个事件侦听器以<a class="new">选择它，然后在发生单击事件时阻止其默认操作。.之后，我克隆了第一个card元素并将其插入在（添加您的故事）链接之前这样我们总是在底部有那个链接
$(document).ready(function(){
$('.new').on('click', function(event){
event.preventDefault();
$('.card').first().clone().insertBefore($('.new'));
});
});.card {
margin:5px;
position: relative;
float: left;
width: 200px;
height: 200px;
text-align: center;
margin-top: 50px;
}
.card:nth-child(1) {
margin-top: 100px;
margin-left: 100px;
margin-right: 8px;
}
.card:nth-child(2) {
margin-top: 100px;
margin-right: 8px;
}
.card.effect__ADD {
margin-left: 8px;
}
.card__front, .card__back {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
}
.card__front, .card__back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.card__front {
background-color:blue;
}
.card__back {
background-color:orange;
transform: rotateY(-180deg);
}
.card.effect__hover:hover .card__front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card.effect__hover:hover .card__back {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
.card.effect__ADD:hover .card__front {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.card.effect__ADD:hover .card__back {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
span > p {
margin-top: 80px;
font-family:Arial;
font-weight:bold;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="card effect__hover">
<div class="card__front"> <span class="card__text"></span>
</div>
<div class="card__back"> <span class="card__text"></span>
</div>
</div>
</div>
<div class="card effect__hover">
<div class="card__front"> <span class="card__text"></span>
</div>
<div class="card__back"> <span class="card__text"></span>
</div>
</div>
<div class="card effect__hover">
<div class="card__front"> <span class="card__text"></span>
</div>
<div class="card__back"> <span class="card__text"></span>
</div>
</div>
<a href="" class="new">
<div class="card effect__ADD">
<div class="card__front">
<span class="card__text"></span>
</div>
<div class="card__back">
<span class="card__text"><p>Add Your Story</p></span>
</div>
</div>
</a>请注意，您可能需要在翻转卡上增加边距，以在它们之间留出一定的空隙
更新评论：
翻转卡的排列混乱是因为：
.card您拥有的CSS中float: left;，删除它并添加此行display:inline-block;，这会将它们全部排列在同一行上.card:nth-child(1)CSS中删除这两行，margin-top: 100px;然后margin-left: 100px;，您将在第一张卡之前省略了不必要的间隙。完成上述操作后，您将获得的结果类似于此JSFiddle本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句