透视和3D转换的用法

透视：perspective：500px;

3D转换：transform-style: preserve-3d;

节省时间看结论：

结论：给父盒子加透视都有效+父盒子开启3D环境，给爷爷盒子加透视有效！

          只有给父盒子开启3D环境才有效！

我先创建一个盒子，盒子里面包含两个子盒子，给两个子盒子定位，让他们都在大盒子里面，

让盒子1（粉红色）不动，盒子2（紫色）沿X轴旋转-60deg（度）

实例一：

没有任何特效。

实例二：

让父盒子添加透视，perspective: 500px;

透视有效！                   

实例三：给父盒子的父盒子（爷爷盒子）body添加perspective: 500px;

也就是给有颜色的盒子的“爷爷”添加透视。

透视无效！

 

实例四：

让父盒子添加transform-style: preserve-3d;                             

让子盒子开启三维立体环境。

紫色盒子下面一半，转到后面去被挡住了。          立体环境有效！

 

实例五 ：

让“爷爷”盒子body添加transform-style: preserve-3d;                                        

可以看出给子盒子开启三维立体环境后，紫色盒子下面还有一半，证明无效！

 

 

实例六 ：

给父亲盒子添加transform-style: preserve-3d;   和   perspective: 500px;         ！

可以看出有透视和开启三维立体环境。有效！

 

实例七 ：

给“爷爷”盒子body添加transform-style: preserve-3d;   和   perspective: 500px;       

没有透视，没开启3D环境。无效！

实例八：

给“爷爷”盒子body添加transform-style: preserve-3d;   和 给父亲盒子添加perspective: 500px;        

可以看出透视有效，开启3D环境无效.

 

 

实例九：

给“爷爷”盒子body添加perspective: 500px;   和 给父亲盒子添加 transform-style: preserve-3d ；    

可以看出透视有效，开启3D环境有效！

总结：单独给父盒子添加透视和开启3D环境有效！

          单独给“爷爷”盒子添加透视和开启3D环境无效！

          给父盒子加透视和开启3D环境都有效！

          给爷爷盒子加透视和开启3D环境都无效！

          给父盒子加透视，给爷爷盒子开启3D环境，透视有效，开启3D环境无效！

         给父盒子开启3D环境，给爷爷盒子加透视，透视和开启3D环境都有效！

结论：给父盒子加透视都有效+父盒子开启3D环境，给爷爷盒子加透视有效！

          只有给父盒子开启3D环境才有效！

这只适合于一个大盒子里面包含两个子盒子，转动子盒子的情况。