CSS3中的2D转换——使用时需要考虑盒子中元素的层级性

在CSS3的2D转换中，2D即二维平面，转换包括移动、缩放、转动、拉长或拉伸等。                   

通过使用CSS transform 属性，使用以下2D转换方法：                                                                 

translate()——移动、rotate()——旋转、scale()——增大或减少元素的大小、skew()——使元素沿X和Y轴倾斜给定角度、matrix()——所有方法的组合             

这些方法在使用时能够带给我们一些特效感。但是有时我们会发现使用2D转换后，盒子中应该展现的元素却没有出现。这是为什么呢？                                                                                              

首先，我们要清楚：盒子或者元素在进行2D转换的时候，转换后的这段时间也相当于进行了定位。它同样具备覆盖同块区域先定义的元素的能力，所以就有可能导致部分元素被覆盖而显示不出来。

举个“栗子”：                                                                                                                                                       

                                        

运行结果：  

     ——鼠标移入图片之后——>

 我们可以发现小人头上应该显示出来的“2D转换”不见了，原因是：img标签在h5标签后面，鼠标移动到图片上，这时引发2D转换效果（增大），                                                                 此时h5和img标签都是定位效果（不是相同的属性，所以不考虑权重）。后写的会层叠先写的内容，所以放大的图片覆盖了“2D转换”文字。

解决方法：

这时只需要调整层级性就可以解决啦~例如：调高h5标签的层级（代码： z-index: 1） 

解决后的运行结果： 

                                                       

---

新手上路，希望各路大神批评指正~~~