稻草日志分享:css3中的transform的3D转换基础篇

王亚兵6个月前 (10-21)HTML5CSS379

前面的分享中,哦们已经了解了css3新增的一个转换属性,并且能够通过我们的transform进行我们元素的移动,旋转,所放。同样知道了在web开发过程中,他是结合transition和动画animation来使用的。来完成页面中一些比较能提高我们用户体验的效果。其实在transform属性中,最让人惊喜的是他新增了3D转换。那什么是3D,什么是3D转换呢?下面和大家详细说一下。

在我们的现实生活中,所能看到的人或景或物都是3D。也就是我们所说的立体的。所谓立体就是有长宽高三个维度。说到这里,可能会有人想到小学数学中的一句话::点动成线,线动成面,面动成体。我们所说的3D或者说三维就是立体的意思。也就是说我们可以通过css3吧我们的页面元素进行一些立体的转换。

css3中transform的3D转换

那该如何转化呢?我们都知道,我们常见的图片都是二维的。怎么让它看起来立体呢?这个就需奥利用我们的坐标轴了。前面的分享中也提到了我们页面的坐标原点是在屏幕的左上方。x轴越往右越大y轴越往下越大。这两个坐标轴就已经构成了我们页面的二维图像,如何变成3D的。就是垂直于屏幕会增加一条z轴。这个z轴式越往外越大。如图:

css3中transform的3D转换

那么3D效果有什么特点呢?首先是我们的近大远小。这个很容易理解,就是越靠近眼睛的物体在眼睛里呈的像越大。离眼睛越小呈像越小。当然还有一个特点就是,前面的物体会遮住后面的物体。这是不是让我们想起了前面分享过的浮动。也是可以挡住后面的图像,这同样是3d透视的原则。

其实我们在我们web开发中,我们学习最多的应该就是3D位移,3D旋转。接下来的分享中。套操日志会详细的和大家分享如何进行transform的3D转换。敬请关注。

发表评论

访客

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