如何拥有一个以上的 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 (将#修改为@）

flip hover html javascript

如何拥有一个以上的 Flip Card 3D only CSS

问题描述

解决方法

相关问答