为什么我无法在 Chrome 中单击此 CSS 翻转卡片上的链接左侧？

Question

尝试单击此翻转卡背面链接的左侧在 Chrome 中不起作用。然而，当我将鼠标悬停在链接的 右侧 上时，我看到了指针光标并能够与之交互：

/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

.card {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  display: inline-block;
}

.card .card-inner {
  position: relative;
  -webkit-transition: -webkit-transform 0.6s;
  transition: -webkit-transform 0.6s;
  -o-transition: transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  will-change: transform;
}

.card .card-inner .card-face {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card .card-inner .card-face.card-back {
  -webkit-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.card .card-inner .card-face .card-face-inner .card-face-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 22px;
}

.card:hover .card-inner {
  -webkit-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.card .card-back {
  background: steelblue;
}

<div class="card">
  <div class="card-inner">
    <img src="https://via.placeholder.com/400x500?text=%20" alt="" />

    <div class="card-face card-front">
      <div class="card-face-inner">
        <div class="card-face-content">
          Front
        </div>
      </div>
    </div>

    <div class="card-face card-back">
      <div class="card-face-inner">
        <div class="card-face-content">
          <a href="#foo">Back</a>
        </div>
      </div>
    </div>
  </div>
</div>

我该如何解决这个问题，以便整个链接都可以点击？我猜这与backface-visibility 有关。我遇到了this StackOverflow answer，但我认为解决方案已经在这里实现了：

.card .card-inner {
    ...
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

Answer 1

我不知道原因，但这很可能是一个错误，因为它可以按预期在 Firefox 上运行。添加pointer-events: none; 到.card-inner 和pointer-events: auto 到.card-face 有效，只有上帝知道为什么。

/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

.card {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  display: inline-block;
}

.card .card-inner {
  position: relative;
  -webkit-transition: -webkit-transform 0.6s;
  transition: -webkit-transform 0.6s;
  -o-transition: transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  will-change: transform;
  pointer-events: none;
}

.card .card-inner .card-face {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: auto;
}

.card .card-inner .card-face.card-back {
  -webkit-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.card .card-inner .card-face .card-face-inner .card-face-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 22px;
}

.card:hover .card-inner {
  -webkit-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.card .card-back {
  background: steelblue;
}

<div class="card">
  <div class="card-inner">
    <img src="https://via.placeholder.com/400x500?text=%20" alt="" />

    <div class="card-face card-front">
      <div class="card-face-inner">
        <div class="card-face-content">
          Front
        </div>
      </div>
    </div>

    <div class="card-face card-back">
      <div class="card-face-inner">
        <div class="card-face-content">
          <a href="#foo">Back</a>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

原因是由于 Chrome 中的小精度误差，180 度并不完全是半转。

并且元素的左边是在前面下面（即使你看不到它，它仍然在那里）。

在 Z 方向上提升你的元素，只是一个像素，它就可以工作了（现在它完全在另一边）：

/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

.card {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  display: inline-block;
}

.card .card-inner {
  position: relative;
  -webkit-transition: -webkit-transform 0.6s;
  transition: -webkit-transform 0.6s;
  -o-transition: transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  will-change: transform;
}

.card .card-inner .card-face {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card .card-inner .card-face.card-back {
  transform: rotateY( 180deg) translateZ(1px);   /* changed */
}

.card .card-inner .card-face .card-face-inner .card-face-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 22px;
}

.card:hover .card-inner {
  -webkit-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.card .card-back {
  background: steelblue;
}

<div class="card">
  <div class="card-inner">
    <img src="https://via.placeholder.com/400x500?text=%20" alt="" />

    <div class="card-face card-front">
      <div class="card-face-inner">
        <div class="card-face-content">
          Front
        </div>
      </div>
    </div>

    <div class="card-face card-back">
      <div class="card-face-inner">
        <div class="card-face-content">
          <a href="#foo">Back</a>
        </div>
      </div>
    </div>
  </div>
</div>