专栏首页前端知识分享第99天:CSS3中透视perspective

第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 用来定义元素不是正面朝向视点时的可视情况 。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第213天:12个HTML和CSS必须知道的重点难点问题

    这12个问题,基本上就是HTML和CSS基础中的重点个难点了,也是必须要弄清楚的基本问题,其中定位的绝对定位和相对定位到底相对什么定位?这个还是容易被忽视的,浮...

    半指温柔乐
  • 第20天:京东nav、footer部分制作

    cursor:pointer; 鼠标变成小手 cursor:default;小白 cursor:move;移动 cursor:text;文本输入

    半指温柔乐
  • 第71天:jQuery基本选择器(二)

    半指温柔乐
  • Python语言中list及tuple的使用示例

    Python语言中的list Python有一种内置数据类型被称为列表:list。 1.list基本定义 list是一种有序的集合,可以随时添加和删除其中的元...

    小小科
  • Jquery的属性操作和DOM操作

           3 val()    :     获取或设置表单内容    (原生JS使用value)

    用户3159471
  • 前沿 | 详解Microns项目:通过大脑逆向工程来创造通用人工智能

    选自IEEE Spectrum 机器之心编译 参与:黄小天、晏奇、李亚洲 去年,美国高级情报研究计划署(Intelligence Advanced Resea...

    机器之心
  • 界面设计技法之布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了。 回到主...

    牧云云
  • JMeter http(s)测试脚本录制器的使用

    http(s) Test Script Recorder允许Jmeter在你使用普通浏览器浏览web应用时,拦截并录制你的操作.

    授客
  • 他实现了AlphaGo Zero的算法,发现可能还得训练1700年 | 代码

    夏乙 发自 凹非寺 量子位 出品 | 公众号 QbitAI AlphaGo退隐,留下身后一众你追我赶的围棋AI。 比如说前些天在野狐上连斩多名职业选手的新版绝艺...

    量子位
  • GCAC32 9.12 A fun application: private information retrieval

    1. http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.22.1099&rep=rep1&typ...

    安包

扫码关注云+社区

领取腾讯云代金券