cssフラッシュカード（JavaScriptが付いていません）

Question

カードが上端からずれるのはなぜですか？ ボーダーボーダーがカードの周りを邪魔しないのはなぜですか？ カードを裏返しても画像が表示されるのはなぜですか？

は、私がここで私はフラッシュカードのすべてに使用する予定のサイズの画像へのリンクである、ここでcodepen codepen

へのリンクを掲載しました。

label.rob-label { 
 
    -webkit-perspective: 1000px; 
 
    perspective: 1000px; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    display: block; 
 
    width: 75%; 
 
    height: 150px; 
 
    position: static; 
 
    left: 50%; 
 
    top: 50%; 
 
    cursor: pointer; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
img { 
 
    width: 90%; 
 
} 
 

 
.rob-card { 
 
    position: relative; 
 
    height: 100%; 
 
    width: 100%; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    -webkit-transition: all 600ms; 
 
    transition: all 600ms; 
 
    z-index: 20; 
 
    border-style: solid; 
 
    border-width: thin; 
 
} 
 

 
.rob-card div { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: #FFF; 
 
    text-align: center; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    border-radius: 2px; 
 
} 
 

 
.rob-card div>table { 
 
    background: #fff; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.rob-card .back { 
 
    color: #222; 
 
    -webkit-transform: rotateX(180deg); 
 
    transform: rotateX(180deg); 
 
} 
 

 
label.rob-label:hover .rob-card { 
 
    -webkit-transform: rotateX(20deg); 
 
    transform: rotateX(20deg); 
 
    box-shadow: 0 20px 20px rgba(50, 50, 50, .2); 
 
} 
 

 
input { 
 
    display: none; 
 
} 
 

 
:checked+.rob-card { 
 
    transform: rotateX(180deg); 
 
    -webkit-transform: rotateX(180deg); 
 
} 
 

 
label.rob-label:hover :checked+.rob-card { 
 
    transform: rotateX(160deg); 
 
    -webkit-transform: rotateX(160deg); 
 
    box-shadow: 0 20px 20px rgba(255, 255, 255, .2); 
 
}

<div class="col-xs-12 col-md-12"> 
 
    <div> 
 
    <label class="rob-label"> 
 
      <input type="checkbox" /> 
 
      <div class="rob-card"> 
 
       <div class="front"> 
 
        <table> 
 
        <tr> 
 
         <td> 
 
         <img src="http://via.placeholder.com/861x223" alt= 
 
     "Sinus Brady - Arrhythmia The rate is slow and the rhythm is irregular"> 
 
         </td> 
 
        </tr> 
 
        <tr > 
 
         <td>1</td> 
 
        </tr> 
 
        </table> 
 
       </div> 
 
       <div class="back"> 
 
       <table> 
 
        <tr> 
 
        <td>Sinus Brady - Arrhythmia The rate is slow and the 
 
     rhythm is irregular</td> 
 
        </tr> 
 
       </table> 
 
       </div> 
 
      </div> 
 
      </label> 
 
    </div> 
 
</div>

Answer 1

あなたは何でブラウザをテストしていますか？私はいくつかの変更を加え、Chromeでデモを行うとすべてがうまくいくように見えます。

https://codepen.io/anon/pen/LzeJQM

body { 
 
    padding-top: 50px; 
 
} 
 

 
label.rob-label { 
 
    -webkit-perspective: 1000px; 
 
    perspective: 1000px; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    display: block; 
 
    width: 75%; 
 
    height: 150px; 
 
    position: static; 
 
    left: 50%; 
 
    top: 50%; 
 
    cursor: pointer; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.rob-card { 
 
    position: relative; 
 
    height: 223px; 
 
    width: 861px; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    -webkit-transition: all 600ms; 
 
    transition: all 600ms; 
 
    z-index: 20; 
 
    border-style: solid; 
 
    border-width: thin; 
 
} 
 

 
.rob-card div { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: #FFF; 
 
    text-align: center; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    border-radius: 2px; 
 
} 
 

 
.rob-card .back { 
 
    color: #222; 
 
    -webkit-transform: rotateX(180deg); 
 
    transform: rotateX(180deg); 
 
    background: #fff; 
 
} 
 

 

 

 
label.rob-label:hover .rob-card { 
 
    -webkit-transform: rotateX(20deg); 
 
    transform: rotateX(20deg); 
 
    box-shadow: 0 20px 20px rgba(50,50,50,.2); 
 
} 
 

 
input { 
 
    display: none; 
 
} 
 

 
:checked + .rob-card { 
 
    transform: rotateX(180deg); 
 
    -webkit-transform: rotateX(180deg); 
 
} 
 

 
label.rob-label:hover :checked + .rob-card { 
 
    transform: rotateX(160deg); 
 
    -webkit-transform: rotateX(160deg); 
 
    box-shadow: 0 20px 20px rgba(255,255,255,.2); 
 
}

<div class="col-xs-12 col-md-12"> 
 
    <div> 
 
     <label class="rob-label"> 
 
      <input type="checkbox" /> 
 
      <div class="rob-card"> 
 
       <div class="front"> 
 
        <img src="http://via.placeholder.com/861x223" alt= "Sinus Brady - Arrhythmia The rate is slow and the rhythm is irregular"> 
 
       </div> 
 
       <div class="back"> 
 
        <p>Sinus Brady - Arrhythmia The rate is slow and the rhythm is irregular</p> 
 
       </div> 
 
      </div> 
 
     </label> 
 
    </div> 
 
</div>