CSS——景深perspective属性

学习了css的3D动画属性和过渡属性后，我们已经可以用它来实现一些动画效果了，比如实现一个正方体。但是当我们实现了这个效果后会发现一个问题，就是我们能看到的面的大小都是一样的。事实上，它每个面的大小确实是一样大的，但是结合现实生活，我们会发现这样一个现象——相同大小的物体，假设它摆在我们眼睛的正前方，我们所能感知到它的大小也是会随着它离我们的距离而改变的。离我们越近，我们感知上感觉它越大，越远越小。

我现在要介绍的景深属性perspective就使我们用3D属性实现的效果更加贴合现实生活了。

perspective属性指是元素的Z平面距离用户之间的距离。浏览器通过该距离来计算用户的视角大小，从而制造出近大远小的3D效果。它的属性值是数字（取正数）加上px。如果还不是很理解，那么我现在用正方体来举例说明：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin:0;padding:0;}body{perspective:1200px; /*在父元素中加景深属性*/}ul{width: 200px;height:200px;position:relative;margin:300px auto;transform-style: preserve-3d;animation:box 6s linear infinite;}li{list-style: none;width:200px;height:200px;position:absolute;left:0;top:0;}  li:nth-child(1){transform:translateZ(-100px) rotateY(-180deg);background:blueviolet;opacity: 0.5;}li:nth-child(2){transform:translateY(-100px) rotateX(90deg);background:darkorange;opacity: 0.5;}li:nth-child(3){transform:translateY(100px) rotateX(-90deg);background:tomato;opacity: 0.5;}li:nth-child(4){              transform:translateX(-100px) rotateY(-90deg) ;background:orchid;opacity: 0.5;}li:nth-child(5){transform:translateX(100px) rotateY(90deg);background:greenyellow;opacity: 0.5;}li:nth-child(6){transform:translateZ(100px);opacity: 0.5;background: paleturquoise;}ul:hover{animation-play-state: paused;}</style></head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></body>
</html>

上面的代码中body加的景深属性，要是它不运用将属性值改为0即可。

下面是没有景深属性的效果：

可以看到我们眼睛感知到第6面和第1面的大小是一样的。

现在我们添加景深属性perspevtive:700px;效果如下：

可以很明显的看出，我们感知到第6面比第1面要大，实际上它们的物理大小是一样的，只是因为第6面离我们的距离小，所以我们视觉上觉得它比较大。

现在我把景深大小改成1200px; 效果如下：

把景深值变大后，我们可以看得出来，景深越大，它对我们视觉上的的影响越小。并不是设置的值越大越好或越好越好，我们适当的去设置这个属性的值使得它能够展现我们所需的效果即可。一般设置900px~1200px。

CSS——景深perspective属性相关推荐

【CSS】记踩坑-图片3D旋转设置景深perspective
在练习CSS3图片3D旋转的时候,为了使图片更有旋转的立体效果,设置了景深,但发现图片的旋转角度发生了偏移. 设置景深之前: CSS <style>div{margin-top: 200p ...
详解CSS3 3D的perspective属性
perspective属性对于3D变形来说至关重要.该属性会设置查看者的位置,并将可视内容映射到一个视锥上,继而投到一个2D视平面上.如果不指定透视,则Z轴空间中的所有点将平铺到同一个2D视平面中,并 ...
html3d空间属性,详解CSS3 3D的perspective属性
perspective属性对于3D变形来说至关重要.该属性会设置查看者的位置,并将可视内容映射到一个视锥上,继而投到一个2D视平面上.如果不指定透视,则Z轴空间中的所有点将平铺到同一个2D视平面中,并 ...
transform-style和perspective属性的使用！
这是一篇关于transform-style和perspective属性的使用分享! transform-style属性 transform-style属性是3D空间中一个极为重要的属性,指定嵌套元素是 ...
CSS3景深-perspective
3D视图正方体: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charse ...
CSS 动画相关属性动态实例大全（82种），2023年祝福第二弹（送你一只守护兔）(下），守护兔源代码免费下载
2023年春节祝福第二弹--送你一只守护兔(下) CSS 动画相关属性动态实例大全(82种).守护兔源代码免费下载本文目录: 五.CSS3 动画相关属性实例大全 (1).CSS3的动画基本属性 (2 ...
巧用CSS的Border属性
. 作者:冯永曜来源:黄山村夫制作过网页的人都有为画线而烦恼的经历,本文介绍的小技巧也许对你有所帮助.我们先来认识一下"Border"(画边框),它是CSS的一个属性,用它可以 ...
CSS中background-position属性
CSS中background属性是经常用到的,可以给某个块设置背景色.以下主要说明以下background-position属性的应用. 一般在设置background属性时的写法是: backgro ...
CSS中连接属性的排序
在CSS超链接的属性中,有四个连接方式: a:link a:hover a:visited a:acticve 之前在使用的时候一直是按照自认为的顺序中去写的,就是 L H V A的排序方式,然而有 ...

CSS——景深perspective属性

CSS——景深perspective属性相关推荐

最新文章

热门文章