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

相关文章

来自专栏逍遥剑客的游戏开发

我与SM不得不说的故事(一)

3.4K3
来自专栏Kurt Niu 的博客

我用C#写的CF外挂

        妈的,你就是想变瘦,你可以卖个减肥药什么的都可以,但是你卖女人就是不行。

833
来自专栏我分享我快乐

PS绘制手机图标-古典吉他(内附PSD源文件下载地址)

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

33011
来自专栏每日一篇技术文章

SceneKit - AR换装应用解决方案

由于今年是AR元年,在苹果推出的ARKit框架之后,各行各业都在马不停蹄的玩起了创意,希望在自己的应用基础上加入AR的元素

851
来自专栏企鹅号快讯

技术干货:前端图形化技术简介(上)

Canvas与SVG 前端图形化技术,主要包括Canvas绘图和SVG绘图两类。 ? Canvas早在十几年前就被火狐浏览器引入。Canvas通过Canvas....

2107
来自专栏理论坞

【教程】C4D样条字设计终极版 | 附源文件工程

在站酷关于C4D的样条约束文字设计教程自己注到的共有三篇, 设计文章写的都非常细致,效果也都是各有长的,有很多学习点 然后最近本人也在国外设计B站看到了几位国外...

572
来自专栏逍遥剑客的游戏开发

GDC2016: Animating With Math

2488
来自专栏后台日记

EXIF--你可能想象不到的信息泄露

用户是幸福的,因为他们根本不知道他们的隐私信息在不经意之间泄露。

2977
来自专栏Android 开发者

[译] 支持库 27.1.0 中的 Loader

1403
来自专栏企鹅号快讯

人工智能:高速

前几天,编辑君为大家推送的「人工智能:缘起」,其中有一条留言提到达特茅斯会议。 ? 是的,让人工智能真正走进科学家视野的正是达特茅斯会议。 1955年夏天,符号...

1909

扫码关注云+社区