perspective · 前端

## 透视电脑显示器是一个 2D平面,图像之所以具有立体感(3D效果),其实只是一种视觉呈现,通过透视可以实现此目的.透视可以将一个2D平面,在转换的过程中,呈现3D效果. 透视原理:近大远小. 浏览器透视:把近大远小的所有图像,透视在屏幕上. perspective:视距,表示视点距屏幕的长短.视点,用于模拟透视效果时人眼的位置. 注:并非任何情况下需要透视效果,根据开发需要进行设置. perspective一般作为一个属性,设置给父元素,作用域所有3D转换的子元素. perspsctive要加载父元素上面. 数值越小,效果越明显. ``` <style> body{ perspective: 300px; } img { display: block; width: 200px; height: 200px; margin: 0 auto ; transition: all 5s; box-shadow: 0px 10px 10px; } img:hover{ transform: rotateY(180deg); } </style> </head> <body> <div> <img src="1.jpg" alt=""> </div> </body> ```