zindex没有处理伪元素

Question

css大师。我一直在谷歌搜索一段时间没有成功。我目前在设置伪元素之前的zindex时遇到了麻烦。它适用于我的一个云（第5行），但是当我用另一个类覆盖transform属性时，它似乎忽略了z-index：-1。你会注意到云上有一个巨大的白色圆圈（假元素）

codepen：https://codepen.io/bautistaaa/pen/zPLpxo?editors=1100

cloud pseudoelement css

    .cloud:after, .cloud:before {
  background: #fff;
    content: '';
    position: absolute;
    z-index: -1;
}

.cloud:after {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;

    height: 100px;
    left: 50px;
    top: -50px;
    width: 100px;
}

  .cloud:before {
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;

    width: 180px;
    height: 180px;
    right: 50px;
    top: -90px;
  }

一旦我尝试引入转换

.cloud-group-1 .biggest-2x {
  transform: scale(3);
  -webkit-transform: scale(3);
  top: 400px;
}

它似乎忽略了z：index而我不确定原因。