transform-style: preserve-3d和 perspective透视

1.perspective

/*电脑显示屏是一个2D平面,图像之所以具有立体感(3D效果),其实只是一种视觉呈现 ,通过透视可以实现此目的。 perspective
通过透视产生的3D效果,只是视觉呈现而已,并不是真正的3d立体的盒子;就是远小近大的效果
*/
/*透视是设置在父元素中然后作用在所有设置了translateZ属性的子元素上*/

/*沿着轴移动*/
/* translateZ 必须添加透视 才能看到效果*/
transform:translateZ(600px);
 
 
 
 
2.transform-style: preserve-3d

/*transform-style: preserve-3d这个属性
必须设置在父元素身上并且父元素有转换(就是有变形)
并且子元素也得有转换(变形)才能看得到效果*/

猜你喜欢

转载自blog.csdn.net/qq_32827261/article/details/65936369