0
我正在使用可以正常工作的转换属性,但是如果我添加了任何链接,那么它将无法正常工作,并在-180度时快速旋转,如果我点击后面的卡片。 我试图删除鼠标离开“翻转”类,但没有运气。有什么建议吗?无法点击翻转包装中的链接
$(document).ready(function() {
$('.flipWrapper').click(function() {
$(this).find('.card').toggleClass('flipped');
return false;
});
});
.flipWrapper {
\t -webkit-perspective: 1000;
\t -moz-perspective: 1000;
\t -ms-perspective: 1000;
\t -o-perspective: 1000;
\t perspective: 1000;
\t width: 100%;
\t height: 300px;
\t position: relative;
\t margin: 0 auto;
\t cursor: pointer;
\t text-align:center;
}
.flipWrapper .card.flipped {
\t -webkit-transform: rotatey(180deg);
\t -moz-transform: rotatey(180deg);
\t -ms-transform: rotatey(180deg);
\t -o-transform: rotatey(180deg);
\t transform: rotatey(180deg);
}
.flipWrapper .card {
\t width: 100%;
\t height: 100%;
\t -webkit-transform-style: preserve-3d;
\t -moz-transform-style: preserve-3d;
\t -ms-transform-style: preserve-3d;
\t -o-transform-style: preserve-3d;
\t transform-style: preserve-3d;
\t -webkit-transition: 0.5s;
\t -moz-transition: 0.5s;
\t transition: 0.5s;
\t margin: 0 auto;
\t text-align:center;
}
.flipWrapper .card .face {
\t padding-top:5px;
\t padding-bottom:5px;
\t padding-left:5px;
\t padding-right:5px;
\t background:#383838;
\t position: absolute;
\t margin: 0 auto;
\t text-align:center;
\t -webkit-backface-visibility: hidden;
\t -moz-backface-visibility: hidden;
\t -ms-backface-visibility: hidden;
\t -o-backface-visibility: hidden;
\t backface-visibility: hidden;
\t z-index: 2;
}
.flipWrapper .card .front {
\t position: absolute;
\t z-index: 1;
\t color: white;
\t cursor: pointer;
}
.flipWrapper .card .back {
\t -webkit-transform: rotatey(-180deg);
\t -moz-transform: rotatey(-180deg);
\t -ms-transform: rotatey(-180deg);
\t -o-transform: rotatey(-180deg);
\t transform: rotatey(-180deg);
\t background:#383838;
\t cursor: pointer;
\t width:100%;
\t height:100%;
\t padding:0;
}
.flipWrapper .card .back p{
\t padding-top:20px;
\t text-align:left;
\t padding-left:20px;
\t padding-right:20px;
}
.flipWrapper .card .back p:last-child{
\t padding-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flipWrapper">
<div class="card">
<div class="face front">
<img src="http://magicpatrick.fr/images/r2.png"alt=""></div>
<div class="face back">
<p><small><em>Mariages</em></small></p>
<p>L’événement le plus magique de la vie d’une personne, le jour de son mariage, est un jour à marquer d’une pierre blanche, et quelle plus belle façon de le célébrer qu’avec un artiste hors du commun. </p><br><a class="" href="google.com">Read more</a>
</div>
</div>
</div>
悉,非常感谢你:) –