css3 perspective 设置多少合适

2024-11-16 10:43:10
推荐回答(3个)
回答1:

perspective与最终呈现在浏览器上的大小,关系运算;
这个公式我在网上没找到 ,用几组数据得出来的结果 ,也测试了几组数据好像也没什么问题,可以用一下;设置了perspective就等于启动了物体的Z轴,Z轴默认为0px
W=物体宽度;
z=translateZ;
p=perspective;
d=最终浏览器渲染的大小;
(w*z) / (p-z) + w=d;

也可以根据一个目标大小推出自己想要的perspective或者translateZ;
(w*z) /( d-w)+z=p;
p-(w*z) /( d-w)=z

先了解几点
1.--3D物体的轴,做一个平时看手机的姿势
1.1--你把手机左右移动(头不要动)这就是物体的X轴运动;
1.2--你把手机上下移动(头不要动)这就是物体的Y轴运动;
1.3--你把手机前后移动(头不要动)这就是物体的Z轴运动;(前后移动就是把手机放远点和拉近点,胳膊伸直和弯曲的动作)

2.--perspective定义观察点到被观察物体Z轴的距离(眼睛到手机的前屏与手机背面的中心点距离);

3.--分清perspective和物体Z轴运动
3.1--如果你的手机不动 ,头前后移动就是perspective在改变;
3.2--如果你的头不动 ,手机前后移动就是Z轴在改变;

4.--如何设置perspective,
perspective设置会改变物体最终呈现在浏览器上的大小和形状;perspective的数值要比translateZ大,否则就看不到物体了,因为他跑到你的眼睛后面去了。
一般弄懂了perspective和translateZ之间的关系后,其他的变形心里就有底了,
比如物体rotateY的时候,我们看到的样子变成另一个样子的过程,脑子就有概念了

5.--例子





.a{
width:100px ;
height:200px;
margin:300px auto;
perspective:60px;
}
.b{
width:100% ;
height:100%;
background:#ccc;
transform: translateZ(30px);
}
套用上面公式(w*z) / (p-z) + w=d;
(100*30)/(60-30)+100=200;
(200*30)/(60-30)+200=400;
虽然你设置的宽高为100px*200px,但是你最终看见的大小为200px*400px

最后 可以百度jQuery之家,进入网站搜索perspective,查看2015年-2-2号写的系列文章 (CSS 3D transforms系列教程-perspective)

回答2:

做一个比喻。你站在一个房子前。从近到远看到的结果是不是不一样的?这跟perspective的结果是一样的。但是一点perspective为0的时候是无穷大。

另外。正常来说。在网页上做出了3D的效果。就是想让用户体验到最正常完整的图片。这样的话是不是就是要距离相对较远才可以看到正常的形态呢?不知道这么说你能不能理解。希望对你有帮助。

回答3:

根据不同的应用场合,自己设定即可。

perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。
注释:perspective 属性只影响 3D 转换元素。
实例说明:
设置元素被查看位置的视图:
div
{
perspective: 500;
-webkit-perspective: 500; /* Safari 和 Chrome */
}