景深（perspective）

2024-05-14 02:44:02

简单的理解，景深就是我们的肉眼距离显示器的距离，景深越大，元素离我们越远，效果就不好，在我们CSS3中，perspective用于激活一个3D空间，属性值就是景深大小（默认none无景深）
应用景深的元素称为“舞台元素”，舞台元素的所有后代元素都会受影响，（如果后代元素中也添加了perspective属性，效果会叠加而不是覆盖）

第一种写法

在父元素中定义css属性perspective

第二种写法

在自身元素的css属性transform中定义perspective（）函数

transform: perspective(depth);

depth的默认值是none，可以设置为一个长度值，这个长度是沿着Z轴距离坐标原点的距离。1000px被认为是个正常值
若使用perspective()函数，那么他必须被放置在transform属性的首位，如果放在其他函数之后，则会被忽略

perspective-origin

同perspective属性，也是设置在父元素上，对后代元素起作用。这个属性来设置你在X, Y轴坐标确定的那个点来看这个元素，Z轴是被perspective属性设置的

灭点

指的是立体图形各条边的延伸线所产生的相交点。透视点的消失点

总结

景深让3D场景有近大远小的效果，是一个不可继承属性，但他可以作用于后代元素（不是本身）。
景深越大，灭点越远，元素变形更小。
景深越小，灭点越近，元素变形更大。
景深可以叠加，内部计算逻辑及其复杂，所以要避免景深叠加！

景深（perspective）相关推荐

CSS3景深-perspective
3D视图正方体: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charse ...
【CSS】记踩坑-图片3D旋转设置景深perspective
在练习CSS3图片3D旋转的时候,为了使图片更有旋转的立体效果,设置了景深,但发现图片的旋转角度发生了偏移. 设置景深之前: CSS <style>div{margin-top: 200p ...
CSS——景深perspective属性
学习了css的3D动画属性和过渡属性后,我们已经可以用它来实现一些动画效果了,比如实现一个正方体.但是当我们实现了这个效果后会发现一个问题,就是我们能看到的面的大小都是一样的.事实上,它每个面的大小确 ...
CSS-0813(重复性)线性/径向渐变-过渡属性transition-变形属性transform变形位移旋转缩放倾斜视域函数perspective变形原点三角形居中方法
title: "CSS 0813-渐变&过渡&变形" date: 2022-08-15T09:43:28+08:00 文章目录 title: "CSS 0 ...
html css3d效果,html，css的3D变形
html,css的3D变形: 首先要了解一个概念:景深perspective 景深可以营造一个近大远小的效果,在IE.opera浏览器目前不支持这个属性,在safari和chrome里,要用-webk ...
html css波浪线,css实现波浪线及立方体
这里是利用linear-gradient来实现,也就是画圆,然后利用底色来遮住部分圆:利用css3属性perspective加旋转实现立方体 1.css实现波浪线 html css.card-list ...
web css圆弧波浪线,web前端入门到实战：css实现波浪线及立方体
这里是利用linear-gradient来实现,也就是画圆,然后利用底色来遮住部分圆:利用css3属性perspective加旋转实现立方体 1.css实现波浪线 html css .card-lis ...
html怎么设置波浪线,前端基础学习-css实现波浪线及立方体
这里是利用linear-gradient来实现,也就是画圆,然后利用底色来遮住部分圆:利用css3属性perspective加旋转实现立方体 1.css实现波浪线 html css .card-lis ...
THREEJS相关3d-force-graph 3d力导图使用
3d-force-graph 一个生成力导图的插件,但是api文档不是很友好,网上教程也很少几乎找不到,写完一个例子所以记录一下自己用到的一些api的配置使用,最开始看官方例子最简单,建议初学者先看官 ...
如何用CSS动画特效让图片旋转起来
杜老师逆战班学员 2020.02.22 我们通常浏览网页,基本上看过去都是呈现着各种文字加图片的2D效果信息,作为一名前端开发工程师非常重要的工作就是要让用户看到网页时有眼前一亮.耳目一新的感觉,用户 ...

最新文章

热门文章