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