如何防止子对象继承三维变换CSS3？

如何防止子对象继承三维变换CSS3

我有一个父div和一个子div，现在我想让使用3d变换的父div和子div保持在前面

例如：

.parent{
变换：rotateX（33度）rotateY（66度）rotateZ（99度）；
位置：相对位置；
宽度：300px；
高度：300px；
保证金：50px自动；
边框：4倍实心深蓝色；
}
.孩子{
位置：绝对位置；
宽度：80px；
高度：80px；
背景：水；
}

我是一个想站在前面的孩子。

首先，应通过设置变换样式：preserve-3D，将父对象的子对象定位在三维空间中，然后您可以将父元素的变换函数按父元素的反向顺序应用于要保持在前面的子元素

.parent{
变换：rotateX（33度）rotateY（66度）rotateZ（99度）；
/*注意！应该将父对象的子对象放置在三维空间中*/
变换样式：保留-3d；
位置：相对位置；
宽度：300px；
高度：300px；
保证金：50px自动；
边框：4倍实心深蓝色；
}
.孩子{
/*注意！您应该应用与父元素相反的旋转顺序（变换函数）*/
变换：rotateZ（-99度）rotateY（-66度）rotateX（-33度）；
位置：绝对位置；
宽度：80px；
高度：80px；
背景：水；
}

我是一个想站在前面的孩子。