【专业技术】css 3D transform 感性理解

一、首先,情感化认识

CSS3中的3D变换效果,其实就是现实中姿势的变换;

虽然都是成年人,但考虑到仍有不少窝中待守的雏鸟,如果上面的解释想不过来,就想想以下这些:

1.下图的这些人在干嘛?跳水?NO, No, No!! 记住,他们不是在跳水,是在做3D变换!!!

2.下图可爱baby在干嘛?广播体操?NO, No, No!! 记住,他不是在做操,是在做3D变换!!!

3.来到2次元,下图这个妹子在这幅姿态称为:

卖萌?NO, No, No!! 记住,他不是在卖萌,是在做3D变换!!!

二、感性认识 rotate 属性;

rotate旋转的意思,rotateX旋转X轴,rotateY旋转Y轴,rotateZ旋转Z轴……

什么X轴/Y轴/Z轴,这几个词从我嘴里一出来,别说你们,我自己都晕了~~

赶快,从现实世界找对应东西理解(参照下面人的旋转):

邹凯的体操单杠运动rotateX;

蔡依林姐姐的钢管舞是rotateY;

旋转飞刀的特技表演是rotateZ。

三、感性认识 必不可少的perspective属性

perspective的中文意思是:透视,视角!

perspective属性的存在与否决定了你所看到的是2次元的还是3次元的,也就是是2D transform还是3D transform. 这不难理解,没有透视,不成3D.

我们初中学美术,或者学建筑的同学肯定接触过透视的一些东西:

不过,CSS3 3D transform中的透视的透视点与上面两张示例图是不同的:CSS3 3D transform的透视点是在浏览器的前方!

四、translateZ更好理解透视

我们都知道近大远小的道理,translateZ的功能就是让元素在自己的眼前或近或远。比方说,我们设置元素为perspective201像素,如下:

perspective: 201px;

则其子元素,设置的translateZ值越小,则子元素大小越小(因为元素远去,我们眼睛看到的就会变小);translateZ值越大,该元素也会越来越大,当translateZ值非常接近201像素,但是不超过201像素的时候(如200像素),该元素的大小就会撑满整个屏幕(如果父辈元素没有类似overflow:hidden的限制的话)。因为这个时候,子元素正好移到了你的眼睛前面,所谓“一叶蔽目,不见泰山”,就是这么回事。当translateZ值再变大,超过201像素的时候,该元素看不见了——这很好理解:我们是看不见眼睛后面的东西的!

五、感性理解perspective-origin

perspective-origin这个属性超级好理解,表示你那双色迷迷的眼睛看的位置。默认就是所看舞台或元素的中心。有时候,我们对中心的位置是不感兴趣的,希望视线放在其他一些地方。比方说:

一图胜千言,屌丝男们这个应该都懂的。

以上就是部分css 3D transform 属性的感性理解, 可以更好的让我们玩转css 3D 让自己的网站更加酷炫;感谢阅读

原文发布于微信公众号 - 程序员互动联盟(coder_online)

原文发表时间:2015-08-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏wblearn

纯CSS3绘制的逼真,呆萌,超酷的CSS3动画纯CSS3人物行走动画 逼真炫酷CSS3动画纯CSS3绘制的小猫笑脸动画 超呆萌纯CSS3绘制可爱小男孩动画 超酷面部表情

1961
来自专栏Coco的专栏

不可思议的混合模式 background-blend-mode

1593
来自专栏MelonTeam专栏

多端排版杂谈

导语 本次主要聊聊多平台的排版技术的差异与共同,涉及的平台有Web、Android、iOS 要说排版技术,在这三个平台中我觉得最有话语权的应该就We...

1727
来自专栏web编程技术分享

《从案例中学习JavaScript》之实现网页版阅读器

3296
来自专栏我分享我快乐

分享-类似谷歌浏览器图标的绘制方法

前言:学生们在学习ps软件的过程中非常的认真与努力,所以对于软件的使用可以说已经很熟练了,可是为什么当我们给学生安排一些原创设计需求的时候,学生却有种无从下手的...

30712
来自专栏Coco的专栏

【CSS进阶】box-shadow 与 filter:drop-shadow 详解及奇技淫巧

2195
来自专栏技术专栏

微信小程序- 移动设备的分辨率与rpx

701
来自专栏IMWeb前端团队

细谈设计稿还原

按道理来说,做重构切页面那本来就是要还原设计稿啊,没话说。但是如果设计师真的细究到0px还原,那还真不是个小事。 首先一个网站落到PS中,都是图片或文字(附加对...

1847
来自专栏腾讯大讲堂的专栏

如何做一个让人闻风丧胆的H5

前言 最近火热的有声娱乐平台 APP,企鹅 FM,在8月28日鬼节前夕,联合《盗墓笔记》推出了“勇敢者的游戏”活动。作为一个 UI 工程师,在这个移动互联网叱咤...

1926
来自专栏腾讯社交用户体验设计

如何做一个让人闻风丧胆的H5 - 腾讯ISUX

1263

扫码关注云+社区