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

如何解决使用遮罩时儿童的背面可见性

当我在 div 上使用掩码时，我无法为它的子项隐藏 backface-visibility。这是一个示例，其中文本 Hello 在其父级旋转时没有变成 hidden。我该如何解决？

#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,1)),color-stop(0.35,color-stop(0.50,0)),color-stop(0.65,color-stop(1.00,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>