创建 ::after 伪元素导致背面可见性问题

Question

我正在尝试制作一张翻转卡片，它的阴影在翻转时会淡入淡出。我读过最有效的方法（就渲染而言）为阴影设置动画是创建一个不透明度为 0 的 ::after 伪元素并将阴影淡入。我附上了两个片段，一个没有阴影工作正常，第二个有阴影并且有奇怪的效果。本质上，当存在伪元素时，backface-visiblity 属性似乎出现故障（或者我遗漏了一些东西）但基本上卡片的背面在它被翻转之前立即显示出来。我放慢了动画速度，并在卡片背面添加了红色阴影，以便很容易看出发生了什么。

提前致谢。

.card {
  perspective: 50rem;
  background-color: #fff;
  box-shadow: 5px 10px 10px rgba(51, 51, 51, 0.8); 
  width: 200px;
  height: 300px;}
  .card--flip {
    background: none;
    box-shadow: none; }
  .card__side {
  
    height: 400px;
    width: 100%;
    box-shadow: none;
    background-color: #777;
    transition: all 3s ease;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden; }
    .card__side--front::after {
      box-shadow: 5px 10px 10px rgba(51, 51, 51, 0.8);    
      opacity: 1;
      transition: all 3s ease; }
    .card__side--back {
      transform: rotateY(-180deg); }
      .card__side--back::after {
        box-shadow: 5px 10px 10px rgba(255, 0, 0, 0.8);
        opacity: 0;
        transition: all 3s ease; }
  .card:hover .card__side--front {
    transform: rotateY(180deg); }
    .card:hover .card__side--front::after {
      opacity: 0; }
  .card:hover .card__side--back {
    transform: rotateY(0); }
    .card:hover .card__side--back::after {
      opacity: 1; }
  .card__header {
    padding: 2rem; }
  .card__main {
    padding: 2rem; }

      WORKING
      <div class="card card--flip">
        <div class="card__side card__side--front">
          <div class="card__header">
            <h1>FRONT</h1>
          </div>
          <div class="card__main">front</div>
        </div>
        <div class="card__side card__side--back">
          <div class="card__header">
            <h1>BACK</h1>
          </div>
          <div class="card__main">back</div>
        </div>
      </div>

.card {
  height: 400px;
  width: 200px;
  perspective: 50rem;
  background-color: #fff;
  box-shadow: 5px 10px 10px rgba(51, 51, 51, 0.8); }
  .card--flip {
    background: none;
    box-shadow: none; }
  .card__side {
    width: 100%;
    box-shadow: none;
    background-color: #777;
    transition: all 3s ease;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden; }
    
 /* ADDED PSEUDO ELEMENT */
    .card__side::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      z-index: -10;
      width: 100%;
      height: 100%; }
 
  
    .card__side--front::after {
      box-shadow: 5px 10px 10px rgba(51, 51, 51, 0.8);
      opacity: 1;
      transition: all 3s ease; }
    .card__side--back {
      transform: rotateY(-180deg); }
      .card__side--back::after {
        box-shadow: 5px 10px 10px rgba(255, 0, 0, 0.8);
        opacity: 0;
        transition: all 3s ease; }
  .card:hover .card__side--front {
    transform: rotateY(180deg); }
    .card:hover .card__side--front::after {
      opacity: 0; }
  .card:hover .card__side--back {
    transform: rotateY(0); }
    .card:hover .card__side--back::after {
      opacity: 1; }
  .card__header {
    padding: 2rem; }
  .card__main {
    padding: 2rem; }

      NOT WORKING
      (added pseudo ::after class)
      <div class="card card--flip">
        <div class="card__side card__side--front">
          <div class="card__header">
            <h1>FRONT</h1>
          </div>
          <div class="card__main">front</div>
        </div>
        <div class="card__side card__side--back">
          <div class="card__header">
            <h1>BACK</h1>
          </div>
          <div class="card__main">back</div>
        </div>
      </div>

Answer 1

将以下内容添加到您的 class：

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

创建 ::after 伪元素导致背面可见性问题

Creating ::after pseudo element causing problems with backface-visibility

html

css

pseudo-element

css-transforms