美文网首页
CSS3 perspective

CSS3 perspective

作者: 花伊侬 | 来源:发表于2018-03-15 17:38 被阅读0次

看了很多人写的对perspective的理解,还有有点懵,打算写一个自己的理解。

perspective:即为视距,可以看作是人的眼睛到屏幕之间的距离

通常是人离屏幕越远(perspective越大)看到的物体越小,离屏幕越近(perspective)看到的物体越大

但电脑不知道人离屏幕的距离,电脑默认人物在不改变物体位置的时候(相当于物体就在屏幕上,与屏幕上的距离为0,我们称为原点)改变perspective的大小看到的物体都是物体本身的大小

如果我们改变物体的translateZ的值,可以发现:

当translateZ的值为负,且越来越小时(即物体离我们越来越远),物体也越来越小

当translateZ的值为正,且越来越大时(即物体离我们越来越近),物体也越来越大

但是当translateZ的值大于perspective的值时,就看不见物体了,这就相当于物体已经移动到人脑袋后面了,当然看不见了~

参考文档:http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
参考demo地址:http://www.zhangxinxu.com/study/201209/transform-perspective-translateZ.html

相关文章

  • (17.05.08)transform、translate、开启

    CSS3 transform     rotate 深入     透视效果perspective(px) ...

  • CSS3 perspective

    看了很多人写的对perspective的理解,还有有点懵,打算写一个自己的理解。 perspective:即为视距...

  • 3D立方体

    知识点: perspective属性 [http://www.w3cplus.com/css3/transform...

  • 大牛带你玩转 CSS3 3D 技术

    css3的3d起步 要玩转css3的3d,就必须了解几个词汇,便是透视(perspective)、旋转(rotat...

  • 3D轮播

    目的 掌握 transform 3D 效果 熟悉 perspective属性 基本概念 CSS3 3D 转换:使元...

  • 前端 2019.11月份面试

    期间遇到的问题: Css3 透视 perspective :100 ; 值越小 和眼睛越近越小越明显,值越大越不明...

  • CSS 3D 原理

    1、perspective是什么 CSS3中的transform变换有rotateX/Y/Z三种3D变换,然而浏览...

  • css3 transform和perspective

    perspective的介绍 指定观察者距离z=0平面的距离,为元素及其内容应用透视变换。当值为0或负值时,无透视...

  • 3d变形

    透视:perspective:none| perspective:none;perspective...

  • css3系列之详解perspective

    perspective 简单来说,就是设置这个属性后,那么,就可以模拟出像我们人看电脑上的显示的元素一样。比如说,...

网友评论

      本文标题:CSS3 perspective

      本文链接:https://www.haomeiwen.com/subject/nrihqftx.html