第99天：CSS3中透视perspective

CSS3中透视perspective

• 透视原理： 近大远小 。
• 浏览器透视：把近大远小的所有图像，透视在屏幕上。
• 理解浏览器的坐标系：浏览器平面为 Z=0的平面，坐标原点默认为图片的中心，可以通过更改透视原点进行更改。
• perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置。
• perspectiveOrigin: 个人理解为视点的xy坐标，perspective则是z坐标，三者可以再三维中确定 视点的唯一位置。
  

浏览器透视原理图

上图截取的是X=0平面，可以从图中看到视点对图像高度投影的影响，由于视点原点的变化导致视点和最高点最低点的角度发上变化，在屏幕上的投影出现了偏移，对于宽度的影响是相同的，图像的轮廓也就从一定程度上表现了图像每一个像素的变化。

通过原理图理解规律

当元素沿着Z轴向前移动的时候，与视点的距离越小，视点和元素的最高点和最低点所称角度最大，放大倍数越大。总结：视距越小放大效果越明显，translateZ越大放大效果越明显。

当元素沿着Z轴移动的距离大于视距后。元素移动到视点后方，固无法投影在屏幕上，所以屏幕上没有呈现。translateZ>perspective 屏幕上无法呈现图像。

perspective 使用方法

perspective 的使用有多种情景，大家可以了解过后按需选择自己所需要。

使用在父元素还是子元素

其中使用 不同元素作为视角对象的过程,就是把perspective属性加在不同的元素上。

仔细观看以舞台作为视角对象时，子元素不仅呈现图像不同，而且还会消失。原因如下图截取Y=0平面 ，及浏览器的俯视图，视点在浏览器前方，元素现在在Z=0平面上，集成现在浏览器上，视点和元素不同部位的连线，就是我们的视线，当元素中子元素的旋转角度与该视线重合，由于其没有宽度 我们就看不见这个子元素了。

书写方式不同的定义

perspective有两种定义方式，如下

.class{
  perspective: 800px;
}
.class{
  transform: prespective(800px)
}

个人关于两种书写方式的不同的理解是，单独定义的perspective只在初次渲染时，投影在屏幕上。 写在transform中的perspective会根据transform动画的变化来进行重新的渲染。所以当使用js或Css3进行动画时，尽量选择后一种定义方式。

使用的注意事项

• perspective的定义要在其他3d变幻之前，否则无效 如translateZ等，这个也很好理解，要首先确定眼睛所在的位置，在屏幕上的成像才会有此计算。

• 呈现3d效果的父元素要添加transform-style：preserver-3d属性。该属性定义该元素的子元素按照3d效果来呈现。

• backface-visibility 用来定义元素不是正面朝向视点时的可视情况 。