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

相关文章

来自专栏数据小魔方

论一个图表的自我修养

昨天给大家讲解了商务图表制作中的黄金原则——最大化数据墨水比。 今天继续给大家解构图表的元素布局! 商务图表作为表达业务数据的重要方式,需要遵循基本的元素布局...

364110
来自专栏九彩拼盘的叨叨叨

第三届 CSS 开发者大会笔记

这次大会于 2016 年 12 月 17 日在广州的天虹酒店举办。演讲嘉宾有大漠,勾三股四等一些业界大牛们。特邀嘉宾有 Andrey Sitnik(PostCS...

14120
来自专栏我分享我快乐

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

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

343120
来自专栏Coco的专栏

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

32550
来自专栏前端说吧

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

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

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

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

21460
来自专栏SEO

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

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

CSS3魔法堂:说说Multi-column Layout

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

21850
来自专栏Coco的专栏

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

19850
来自专栏Coco的专栏

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

19970

扫码关注云+社区

领取腾讯云代金券