如何解决如何拥有一个以上的 Flip Card 3D only CSS
嗨，我尝试仅通过 CSS / JS 创建 3D 翻盖卡，但我无法使其正常工作。首先我不知道如何在不使用不同类的情况下拥有多张翻转卡，然后我真的不知道如何更改点击区域，我更喜欢添加链接“+”和“-”而不是点击到处。所以请你告诉我怎么做：
谢谢
$('.container').on('click',function () {
$('.card').toggleClass('flipped');
});html,body {
height: 100%;
margin: 0;
}
body {
background: #00A5F7;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container {
width: 300px;
height: 200px;
position: relative;
perspective: 800px;
border-radius: 4px;
}
.links {
position: absolute;
bottom: 0;
right: 15px;
cursor: pointer;
}
.card {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.175,0.885,0.32,1.275);
border-radius: 6px;
Box-shadow: 0 6px 16px rgba(0,0.15);
cursor: pointer;
}
div {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 6px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
font: 16px/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;
font-smoothing: antialiased;
color: #47525D;
}
.back {
transform: rotateY(180deg); }
.flipped {
transform: rotateY(180deg);
}<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="card">
<div class="front">
<p class="links">+</p>
There are many
<div class="back">
<p class="links">-</p>
hello I'm here too.</div>
</div>
</div>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。