【专业技术】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 条评论
登录 后参与评论

相关文章

来自专栏Coco的专栏

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

1453
来自专栏杨逸轩 ' sBlog

CSS3版天气预报

2617
来自专栏coding for love

CSS进阶01-CSS视觉格式化

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

380
来自专栏较真的前端

为什么 CSS 这么难学?

1584
来自专栏数据小魔方

sparklines迷你图系列14——Correlation(HeatMap)

今天跟大家分享的是sparklines迷你图系列13——Correlation(HeatMap)。 热力图在excel中可以轻松的通过自带的条件格式配合单元格数...

2756
来自专栏一“技”之长

iOS开发CoreAnimation解读之一——初识CoreAnimation核心动画编程

        众所周知,绚丽动画效果是iOS系统的一大特点,通过UIView层封装的动画,基本已经可以满足我们应用开发的所有需求,但若需要更加自由的控制动画的...

653
来自专栏Coco的专栏

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

1305
来自专栏姬小光

像素眼是怎样炼成的

传说的像素眼,也就是可以快速分辨出 1px 以上差异的双眼,往往由资深设计师所 get√,小鸡君本人是个苦逼程序员,但小鸡君的像素眼也不比任何一个设计师差。

564
来自专栏前端说吧

JS-自制提速小工具:开发页面时需要按比例计算宽高值的快速计算器

2685
来自专栏coding for love

CSS入门6-盒模型

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

421

扫描关注云+社区