css - 我该如何解决这个问题？

Question

我的 SCSS 代码有一点问题。我厌倦了将一张卡片放在其他卡片后面，但只是堆叠在父容器的底部，我试图将父位置从相对位置反转到绝对位置，但我真的被困在这里了，这是行不通的。

.card {
  perspective: 150rem;
  -moz-perspective: 150rem;
  position: relative;
  height: 50rem;
  &__side {
    color: $color-white;
    font-size: 2rem;
    height: 50rem;
    transition: all .8s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    backface-visibility: hidden;
    border-radius: 3px;
    box-shadow: 0 1.5rem 4rem rgba($color-black, $alpha: .15);
    &--front {
      background-color: $color-white;
    }
    &--back {
      transform: rotateY(180deg);
      &-1 {
        background-image: linear-gradient(to right bottom, $color-secundary-light, $color-primary-light);
      }
    }
  }
  &:hover &__side--front {
    transform: rotateY(180deg);
  }
  &:hover &__side--back {
    transform: rotateY(0);
  }
}

<div class="row">
  <div class="col-1-of-3">
    <div class="card">
      <div class="card__side card__side--front"> Front </div>
    </div>
    <div class="card">
      <div class="card__side card__side--back card__side--back-1"> Back </div>
    </div>
  </div>

标签： csssass