html - css 闪存卡(无 Javascript)

Question

为什么卡片会翻过顶边？为什么边框没有一直环绕卡片？为什么我把卡片翻到背面还能看到图像？

我在这里发布了代码笔的链接 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>