自学前端第二十二天:perspective视觉

CSS之perspective详解

语法(实际开发都是给perspective: 1000px;

perspective: number | none;

1.简单来说，就是设置这个属性后，那么，就可以模拟出像我们人看电脑上的显示的元素一样。比如说， perspective：800px 意思就是，我在离屏幕800px 的地方观看这个元素。(这个属性，要设置在父元素上面)好了

2.最后补充一点，这个perspective 属性呢，要放在父级身上,然后还有一个属性perspective-origin，这个属性也是设置在父级身上。这个属性呢，默认值是 center center，也就是 居中。这两个参数呢，是根据自身来定位的， 0px 0px 代表着元素的左上角，center center代表着元素的中间点。可以设置像素 50px 也可设置百分比 50%，还可以设置 top right left bottom center 等。

3.perspective-origin这个属性有什么用呢？ 这个属性是相当于人 的眼睛看哪里。你没有设置，也就是默认看父元素 中间的地方。看下面两张图的例子，就知道什么意思啦。

4.perspective:中心人眼(人眼到物体的z轴距离,即给z轴长度) ,

必须设置在父级上,不设置perspective则看不出translateZ轴移动的近大远小的感觉

5.perspective-origin: 调整人眼视角,设置在父级上.

(默认50%,50% .第一个值X越大,眼睛越往右挪,第二个值Y越大,眼睛越往下挪,)

6. perspective VS translateZ:

外到内距离:perspective：800px