【专业技术】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绘制可爱小男孩动画 超酷面部表情

2561
来自专栏偏前端工程师的驿站

CSS3魔法堂:说说Multi-column Layout

前言  是否记得《读者文摘》中那一篇篇优美感人的文章呢?那除了文章内容外,还记得那报刊、杂志独有的多栏布局吗?  当我们希望将报刊、杂志中的阅读体验迁移到网页...

1965
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(十七)-- 不可思议的颜色混合模式 mix-blend-mode

1647
来自专栏SEO

「知识」HTML语义元素含义与SEO详细讲解

3057
来自专栏前端说吧

JS-制作网页特效——选项卡效果(水平,点击)

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

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

3376
来自专栏技术专栏

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

901
来自专栏前端黑板报

小程序-实现竖排文字

最近我在做一个诗词类的小程序:《诗词屋》,已经上线。因为古文有从上到下,从右到左阅读和书写的习惯,所以我设计了一个摘录页面,如下: ? 整体布局...

1.3K8
来自专栏Coco的专栏

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

1485
来自专栏MelonTeam专栏

多端排版杂谈

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

1807

扫码关注云+社区