Question

我正在尝试创建一个翻转卡片，其阴影在翻转时会淡入淡出。我已经读到，动画阴影最有效的方法（就渲染而言）是创建不透明度为0的:: after伪元素并使阴影淡入。我要附加两个片段，一个片段不包含阴影工作正常，第二个具有阴影并具有怪异的效果。本质上，当伪元素存在时，背面可见性属性似乎会出现故障（或者我丢失了一些东西），但是基本上，卡片的背面在翻转之前就已显示出来。我放慢了动画的速度，并在卡片的背面添加了一个红色阴影，以便可以轻松查看正在发生的一切。

谢谢。

.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

将以下内容添加到您的课程中：

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

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

1 个答案: