为什么我无法在 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. 我遇到了这个 StackOverflow 答案，但我认为该解决方案已经在这里实现了：

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

Answer 1

原因是，由于 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>