多个tramform元素层叠问题解决

在同一父级下的多个transform元素，后声明的元素的层级要在先声明的元素之上。这就会导致后者会覆盖前者。如果我们要做一个音乐播放动画，那么就会出现这种情况：

HTML代码：

在transform中，z-index是失效的，因此不能通过设置z-index来解决问题。

解决方案：在transform中要通过设置两者 Z 轴的方向，首先要在父级元素上声明变换类型（transform-style）为3D变换，然后设置子元素的 translateZ 属性，即可。

Transform-style:

规定如何在3D空间中呈现被嵌套的元素，该属性必须与transform属性一同使用。该属性设置在父元素中

Transform-style:flat|preserve-3d

因为该属性必须与transform一起使用，因此，如果父级元素如果没有变换的话可以使用不影响父级表现是变换，比如:transform:scale(0);

TranslateZ():

使用translateZ()函数可以让元素在Z轴进行位移，当其值为负值时，元素在Z轴越移越远,离屏幕越远。反之，当其值为正值时，元素在Z轴越移越近，离屏幕越近。

设置后在看看效果：

子级添加：

 最终效果：

符合我们预期，效果完成，饮杯茶先！