为什么我的CSS Flip Card Grid无法正常工作？

Question

我一直在努力创建这个3x3的翻转卡网格（这是基本的Web设计课程的一项工作），而且花了几个小时，但无济于事。我正在使用一个复选框，以便在“选中”时翻转，而在“未选中”时翻转。现在，当我单击卡片时，它只是沿其轴翻转，但是内容仍然是“正面”。我的代码如下。对不起，如果有点混乱；我是编码的新手，几个月前刚刚开始通过在线课程学习。请帮助！

body {
        font-family: Helvetica, sans-serif;
        text-align: center; 
        background: linear-gradient(to top, #A4F9C8, #A7FFF6);
        color: #5C6F68;
      }
      div.body {
        height: auto;
        width: auto;
        box-shadow: none; 
        cursor: default;
        background: none;
        filter: none;
        display: inline-block;
      }  
      label {
        height: 131px;
        width: 20em;
        overflow-y: auto;
        padding: 15px;
        margin: 3px;
        background: RGB(255, 255, 255, 0.3);
        border: solid 5px RGB(255, 255, 255, 0.3);
        cursor: pointer;
        line-height:1.3em;
        position: relative;
        -webkit-perspective: 1000px;
        perspective: 1000px;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        display: block;
        
        /*box-shadow: 3px 3px 3px #a6a6a6;*/
      }  
      input {
          display: none;
      }      
      div.thecard {
        position: relative;
        width: 100%;
        height: 100%;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transition: all 600ms;
        transition: all 600ms;
        background: none;
        overflow-y: auto;
        z-index:20;
      }  
      div.thecard div {
        position: absolute;
        height: auto;
        width: auto;
        background: none;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
      }  
      div.thecard div.theback {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
      }  
      :checked + .thecard {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
      }      
      .menubar {
         width:auto;
         height:30px;
         font-size:12px;
         display: flex;
         justify-content: center;
         align-items: center;
         background: RGB(255, 255, 255, 0.3);
      }  
      .thecard::-webkit-scrollbar {
        width: 10px;
      }
      .thecard::-webkit-scrollbar-track {
        background: RGB(255, 255, 255, 0.3);
      }
      .thecard::-webkit-scrollbar-thumb {
        background: white;
      }
      .thecard::-webkit-scrollbar-thumb:hover {
        background: #FF579F;
      }
      ::-webkit-scrollbar {
        width: 10px;
      }
      ::-webkit-scrollbar-track {
        background: #d4fef5;
      }
      ::-webkit-scrollbar-thumb {
        background: white;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: #FF579F;
      }

    <h1>Hamlet Review</h1>
    <div class="body">
    <table>
     <tr>
     <td>
      <label>
      <input type="checkbox"/>
      <div class="thecard">
      <div class="thefront">
      <p style="font-size:13px; padding-left:5px">
        “To be, or not to be, that is the question:<br> 
        Whether 'tis nobler in the mind to suffer<br>
        The slings and arrows of outrageous fortune,<br>
        Or to take arms against a sea of troubles<br>
        And by opposing end them. To die—to sleep,<br>
        No more; and by a sleep to say we end<br>
        The heart-ache and the thousand natural shocks<br>
        That flesh is heir to: 'tis a consummation<br>
        Devoutly to be wish'd. To die, to sleep;<br>
        To sleep, perchance to dream—ay, there's the rub:<br> 
        For in that sleep of death what dreams may come,<br>
        When we have shuffled off this mortal coil,<br>
        Must give us pause—there's the respect<br>
        That makes calamity of so long life.<br>
        For who would bear the whips and scorns of time,<br>
        Th'oppressor's wrong, the proud man's contumely,<br>
        The pangs of dispriz'd love, the law's delay,<br>
        The insolence of office, and the spurns<br>
        That patient merit of th'unworthy takes,<br>
        When he himself might his quietus make<br>
        With a bare bodkin? Who would fardels bear,<br>
        To grunt and sweat under a weary life,<br>
        But that the dread of something after death,<br>
        The undiscovere'd country, from whose bourn<br>
        No traveller returns, puzzles the will,<br>
        And makes us rather bear those ills we have<br>
        Than fly to others that we know not of?<br>
        Thus conscience does make cowards of us all,<br>
        And thus the native hue of resolution<br>
        Is sicklied o'er with the pale cast of thought,<br>
        And enterprises of great pitch and moment<br>
        With this regard their currents turn awry<br>
        And lose the name of action” (III.1.57-89).
        </p>
        </div>
        <div class="theback">Hamlet</div>
        </div>
      </label>
      </td>
     <td>
      <label>
      <input type="checkbox"/>
      <div class="thecard">
      <div class="thefront">
        “Get thee to a nunnery, go. Farewell” (III.1.138-139).
        </div>
        <div class="theback">Hamlet</div>
      </div>  
      </label>
      </td>
      <td>
      <label>
      <input type="checkbox"/>
      <div class="thecard">
      <div class="thefront">
        “O, what a noble mind is here o'erthrown! The courtier's, scholar's, eye, tongue, sword, the expectancy and rose of the fair state, the glass of fashion and the mould of form” (III.1.150-154).
        </div>
        <div class="theback">Ophelia</div>
      </div>  
      </label>
      </td>
      </tr>
     <tr>
     <td>
     <label>
     <input type="checkbox"/>
     <div class="thecard">
     <div class="thefront">
        “It shall do well. But yet do I believe the origin and commencement of his grief sprung from neglected love” (III.1.176-178).
        </div>
        <div class="theback">Polonius</div>
        </div>
      </label>
      </td>
      <td>
      <label>
      <input type="checkbox"/>
      <div class="thecard">
      <div class="thefront">
        “To England send him; or confine him where your wisdom best shall think” (III.1.197-198).
        </div>
        <div class="theback">Polonius</div>
        </div>
      </label>
     </td>
     <td>
     <label>
     <input type="checkbox"/>
     <div class="thecard">
     <div class="thefront">
        “Madness in great ones must not go unwatch'd go” (III.1.189).
        </div>
        <div class="theback">Claudius</div>
        </div>
      </label>
    </td>
    </tr>
      <tr>
      <td>
      <label>
      <input type="checkbox"/>
      <div class="thecard">
      <div class="thefront">
        “Speak the speech, I pray you, as I pronounced it to you, trippingly on the tongue. But if you mouth it, as many of our players do, I had as lief the town-crier spoke my lines” (III.2.1-4).
        </div>
        <div class="theback">Hamlet</div>
        </div>
      </label>
     </td>
      <td>
      <label>
      <input type="checkbox"/>
      <div class="thecard">
      <div class="thefront">
        “The lady doth protest too much, methinks” (III.2.218).
        </div>
        <div class="theback">Gertrude</div>
        </div>
      </label>  
     </td>
<td>
<label style="overflow:hidden">
<input type="checkbox"/>
 <div class="thecard" style="height:180px">
 <div class="thefront">
        <p>“The Mousetrap. Marry, how? Tropically. This play is the image of a murder done in Vienna. Gonzago is the Duke's name; his wife, Baptista. You shall see anon. 'Tis a knavish piece of work; but what o' that? Your majesty, and we that have free souls, it touches us not" (III.2.222-227).</p>
        </div>
                <div class="theback">Hamlet</div>
        </div>
      </label>
      </td>
      </tr>
    </table>
    </div>
    <div class="menubar">Designed by Michael Chen.</div>

Answer 1

您不翻转容纳两张卡片的容器，先从一张已经翻转的卡片开始，然后当复选框被翻转时，将先前翻转的卡片翻转，再翻转另一张卡片。

我最小化了您的代码以进行说明。

label {
  height: 300px;
  width: 20em;
  padding: 15px;
  margin: 3px;
  position: relative;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  display: block;
}

input {
  display: none;
}

div.thecard {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  background: none;
  z-index: 20;
}

div.thecard div {
  position: absolute;
  -webkit-transition: all 600ms;
  transition: all 600ms;
  height: 100%;
  overflow-y: auto;
  background: none;
  backface-visibility: hidden;
}

div.thecard div.theback {
  transform: rotateX(180deg);
}

:checked+.thecard>.theback {
  transform: rotateX(360deg);
}

:checked+.thecard>.thefront {
  transform: rotateX(180deg);
}

<label>
      <input type="checkbox">
      <div class="thecard">
      <div class="thefront">
      <p style="font-size:13px; padding-left:5px">
        “To be, or not to be, that is the question:<br> 
        Whether 'tis nobler in the mind to suffer<br>
        The slings and arrows of outrageous fortune,<br>
        Or to take arms against a sea of troubles<br>
        And by opposing end them. To die—to sleep,<br>
        No more; and by a sleep to say we end<br>
        The heart-ache and the thousand natural shocks<br>
        That flesh is heir to: 'tis a consummation<br>
        Devoutly to be wish'd. To die, to sleep;<br>
        To sleep, perchance to dream—ay, there's the rub:<br> 
        For in that sleep of death what dreams may come,<br>
        When we have shuffled off this mortal coil,<br>
        Must give us pause—there's the respect<br>
        That makes calamity of so long life.<br>
        For who would bear the whips and scorns of time,<br>
        Th'oppressor's wrong, the proud man's contumely,<br>
        The pangs of dispriz'd love, the law's delay,<br>
        The insolence of office, and the spurns<br>
        That patient merit of th'unworthy takes,<br>
        When he himself might his quietus make<br>
        With a bare bodkin? Who would fardels bear,<br>
        To grunt and sweat under a weary life,<br>
        But that the dread of something after death,<br>
        The undiscovere'd country, from whose bourn<br>
        No traveller returns, puzzles the will,<br>
        And makes us rather bear those ills we have<br>
        Than fly to others that we know not of?<br>
        Thus conscience does make cowards of us all,<br>
        And thus the native hue of resolution<br>
        Is sicklied o'er with the pale cast of thought,<br>
        And enterprises of great pitch and moment<br>
        With this regard their currents turn awry<br>
        And lose the name of action” (III.1.57-89).
        </p>
        </div>
        <div class="theback">Hamlet</div>
        </div>
      </label>