css - 使用遮罩时儿童的背面可见性

Question

当我在 a 上使用遮罩时div，我无法backface-visibility为其子级隐藏。这是一个示例，其中文本Hellohidden在其父级旋转时尚未变为。我该如何解决这个问题？

#div1 {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: mymove 3s infinite;
    animation: mymove 3s infinite;
  transform-style: preserve-3d;
  -webkit-mask-image: -webkit-gradient(
    linear, left top, right bottom, 
    color-stop(0.00,  rgba(0,0,0,1)),
    color-stop(0.35,  rgba(0,0,0,1)),
    color-stop(0.50,  rgba(0,0,0,0)),
    color-stop(0.65,  rgba(0,0,0,0)),
    color-stop(1.00,  rgba(0,0,0,0)));
}
@keyframes mymove {
  0% {transform:rotateY(0deg);}
  100% {transform:rotateY(360deg);}
}

<div id="div1" style="backface-visibility: visible;">
  <p style="backface-visibility: hidden;">HELLO</p>
</div>