稻草日志分享:css3中transform属性的3D移动转换和透视属性

王亚兵8个月前 (10-22)HTML5CSS3369

前面我们已经理解成了什么是3d,也了解了在web前端开发中的3D坐标轴。今天我们给大家说下什么是真正的3d移动转换。以及如何让web页面呈现出一个3d效果。以及介绍性的一个属性,就是我们perspective透视属性,这个是实现我们页面3d效果的关键。

在此之前我们学到transform中的移动属性translate共有两个值,一个是translateX,一个是translateY。也就是一个控制x轴移动,一个是控制我们y轴移动。很多人可能都想到了,我们是不是还有一个控制z轴移动的translateZ。没错,在3d移动转换中就可以进行z轴的移动了。具体操作如下:

css3中3d移动与透视

很多人说,没有看到什么效果啊,这个时候需要注意一点。如果说z轴的原点是屏幕的话。越屏幕外面越大,而且是正数,越往里越小是负数。上图中我们沿着z轴移动了50px。也就是离我们的眼睛越近了。根据近大远小的原理。图像会稍微的变大。但是为什么没有反应。这个是因为我们没有设置我们的perspective属性。这个就相当于我们的透视开关。

css3中3d移动与透视

那么问题来了,什么是透视,通俗的说我们的透视是绘画理论中的一个概念。其实在css3中的透视没有绘画中那么复杂。就是眼睛距离视图的距离。值越小距离我们的元素越近。元素视图就越大,相反则元素视图越小。而且我们发现,这个透视只影响有3d转换的属性视图,而不是影响本身。而且我们的透视并不是添加到需要透视的元素上,而是添加到他的父级元素上。很容易理解。如果剧场要打灯,肯定是打在舞台上,观众才能看清。

css3中3d移动与透视

其实我们的3d移动转换肯定是有简写的,这个不是translate而是translate3D。通过上图可发看的出,页面效果没有什么变化,以上就是稻草日志分享的关于transform中3d移动转换的内容和透视属性。

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。