CSS 3D动画概述菜鸟级解读之一

无论你是前端还是设计师,相信你在网页二维空间上的操作早已经得心应手,JS处理时间线的动画也早已经烂熟于胸。从今天开始,我跟大家分享一些“新”的东西,网页的第三个维度,以及纯CSS实现的动画。限于篇幅,从初级到比较复杂的3D动画大概会说个三四个回合,我们就从最初级的东西开始说,由于这些知识大部分都是我个人根据文档所理解的,主要是当笔记。所以,也许会跟不少同学所理解的不太一样,甚至相悖,我希望大家可以在文章下面指出不对的地方,我们共同来学习。

在我们以前使用绝对定位的时候就已经初步接触过Z轴,那时候只是简单的层叠,现在介绍一个更强大的属性:Transform 。

从字面上就能看出,Transform 是 变型 的意思,他的值主要包括 旋转rotate,扭曲skew,缩放scale,移动translate以及矩阵变形matrix 。

这次我主要拿 rotate 来写例子,因为他能更好的配合后面3D的部分,其他的几个参数大家只需要挨个替换一下,就能明白他们的用法。

3D Transform 中 rotate 有三种方法,rotateX(angle) X轴旋转,rotateY(angle) Y轴旋转,rotateZ(angle) Z轴旋转。

XYZ表示一个平面以哪个轴为坐标来旋转,里面的值是他的角度。为了更形象一点,请看这张图

从几何学上来说,面旋转为体,这虽然还没有说到3D,但是已经隐约有了3d的概念了吧。

然后就要说到一个很重要的属性,perspective。

依然看字面意思,这个属性是透视的意思。无论你是否学过美术,都知道近大远小的道理,包括上面我们的这张旋转动画,如果没有了perspective属性,那么你看到的就不再是一个矩形的旋转,而是一个矩形逐渐变窄,然后逐渐变宽,因为他没有透视。

perspective后面的值是一个数字,他有两种实现方法,

使用transform属性,perspective作为函数值:

  1. transform: perspective(800);

或者直接使用 perspective 属性:

  1. perspective: 800;

perspective可以写在画布(父元素)上,也可以直接写在元素本身上,对于一张画布只有一个变型体的时候,几乎没有差别。但是当一个画布上有多个变型体的时候,两种写法的差别立即就表现出来了。就像这张图,黄色的部分,perspective直接写在色块上,紫色的部分,perspective写在了父容器上,以画布作为透视元素,所以子元素的形态都是不一样的。

perspective的值,则是决定3D变形效果的强度的,这个值大致可以理解为远近。只越大,你离物体就越远。就像一个离你很远的正方体(比如魔方)在做旋转,他的视觉效果就比较弱,但是如果这个魔方在你的眼前旋转,那么效果就比较强烈。

而这里我们会用到一个新的Transform的参数,translateZ。

前面rotateZ已经让我们找到了Z轴,translateZ就可以用来处理Z轴的坐标。让元素在自己的眼前或近或远。他的值是要参考父元素的perspective值。

比如父元素的perspective值是800,那么子元素translateZ的值越小,就表示子元素离我们越远,看起来也就越小。当子元素的translateZ接近800但是小于800的时候,比如790+,那么这个元素会撑满整个屏幕(注意,会超出浏览器),因为这个时候表示这个元素已经到了你眼前,眼前就是一片小树叶也是可以遮挡住后面所有东西的。当子元素超过了800,就表示这个元素已经到了我们眼睛后面,我们是看不见自己后脑勺以后的东西的,元素就会消失不见。

(这里稍微提一下,我们上面那三个平面旋转的图,大家能看到在Y或者Y轴的旋转到90度的时候,图形消失了,这是因为90度的时候平面与我们的视线平行,面是没有厚度的,所以也会消失不见。当夹角变大之后又会重新出现,这个被成为视觉盲区。)

简单的讲过透视之后,再来看一个属性 perspective-origin ,透视原点。

这个属性就很好理解了,就是透视点的位置,如果你会使用flash,那么perspective-origin就相当于flash里面的对齐点,当你做动画处理的时候,元素会围绕这个对齐点来旋转什么的。CSS3里默认perspective-origin是元素的中心。

当有了透视,有了变型之后,就该用到transform-style这个属性了,他有两个参数,flat与preserve-3d。flat为默认值,表示平面的;后者preserve-3d表示3D透视。

大家可以简单的理解为这是开启3D空间的方法 :

  1. transform-style: preserve-3d;

仅仅是开关,这个属性不会对我们的画面造成任何影响,除非你用flat。

3D世界里还有一个原理就是,你无法穿过一个物体看到他后面的物体,除非这个物体是透明的,这里我们就用到一个属性,backface-visibility,当他的值为hidden的时候,就是正常的3D世界,当不写这个属性的时候…….我建议大家试试。

现在简单的几何原理都有了,我们可以让平面变3D的过程动态的演示出来了,就是css3的 Animation !

在了解Animation之前,我们必须了解另一个特殊的东西,Keyframes。

这里用过flash的同学一看就能明白,就是关键帧,每一个关键帧代表动画的一个过程节点,Keyframes具有其自己的语法规则,他的命名是由”@keyframes”开头,后面紧接着是这个“动画的名称”加上一对花括号“{}”,括号中就是一些不同时间段样式规则,有点像我们css的样式写法一样。例如:

  1. @-moz-keyframes name{
  2. 0% {
  3. -moz-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
  4. }
  5. 25% {
  6. -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
  7. }
  8. 50% {
  9. -moz-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
  10. }
  11. 75% {
  12. -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
  13. }
  14. 100% {
  15. -moz-transform:rotateY(0eg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
  16. }
  17. }

这里,name是动画的名称,百分比里边只要写你要实现的动画就行,可以写位移啊,色值变化啊,透明度变化啊等等。

然后我们再看一下Animation的几个常用属性:

  1. animation-name:'name';/*动画属性名,也就是我们前面keyframes定义的动画名*/
  2. animation-duration: 2s;/*动画持续时间*/
  3. animation-timing-function: linear;
  4. /*
  5. 动画频率,有匀速,先快后慢 linear:动画以匀速运动
  6. ease:默认值,开始慢,中间快,结束慢,不对称
  7. ease-in:开始慢,后面快
  8. ease-out:开始快,后面慢
  9. ease-in-out:开始慢,中间快,结束慢,对称(注意与ease的区别)
  10. cubic-bezier(n,n,n,n):可以使用cubic-bezier自定义速度,n的取值从0到1
  11. */
  12. animation-delay: 2s;/*动画延迟时间*/
  13. animation-iteration-count: 1;/*定义循环资料,infinite为无限次*/
  14. animation-direction: alternate;/*定义动画方式, normal 动画仅正向播放。 alternate 动画正向播放奇数次迭代,并反向播放偶数次迭代。在反向播放周期中,与 animation-timing-function 关联的值也会反转。*/

这些属性,看字面就能理解了,就不详细解释,用在例子里是最形象的。这里先写一个简单平面旋转的例子,就本例子而言,webkit核心的浏览器处理变型跟动画明显是最好的,而moz下会有明显的锯齿出现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

*{margin:0;

padding:0;}

.wrapper1{

width:150px;

height:191px;

border:#eee 1px solid;

border-radius:10px;

padding:2px;

float:left;

margin:200px 0 0 50px;

-moz-perspective:800px;

-moz-transform-style:preserve-3d;

-webkit-perspective:800px;

-webkit-transform-style:preserve-3d;

-moz-backface-visibility:;

-webkit-backface-visibility:hidden;

}

.box1{

width:150px;

height:191px;

background:url(https://www.chengrang.com/wp-content/uploads/2012/10/nut-2.jpg);

border-radius:10px;

-webkit-animation-name:wobble;

-webkit-animation-duration: 5s;

-webkit-animation-timing-function: linear;

-webkit-animation-delay: 0;

-webkit-animation-iteration-count: infinite;

-webkit-animation-direction: ;

-moz-animation-name:wobble;

-moz-animation-duration: 5s;

-moz-animation-timing-function: linear;

-moz-animation-delay: 0;

-moz-animation-iteration-count: infinite;

-moz-animation-direction: ;

}

@-webkit-keyframes wobble{

0% {

-webkit-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);

}

25% {

-webkit-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);

}

50% {

-webkit-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);

}

75% {

-webkit-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);

}

100% {

-webkit-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);

}

}

@-moz-keyframes wobble{

0% {

-moz-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);

}

25% {

-moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);

}

50% {

-moz-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);

}

75% {

-moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);

}

100% {

-moz-transform:rotateY(0eg) rotateX(0deg) rotateZ(0deg) translateZ(0px);

}

}

</style>

</head>

<body>

<div class="wrapper1">

<div class="box1"></div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

由于开发任务重,这个月线说这些入门的属性,就不详细讨论3D复杂动画了,下个月如果有空闲的话,接着本文,继续跟大家讨论并一起学习3D物体的运动,比如正方体的排列旋转等等。

题外话:希望大家不要因为IE9以下版本的不兼容就延迟学习新的东西,那就会处处比别人慢一步。另外,从Safari开始,浏览器已经可以由3D函数触发硬件加速。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏YoungGy

微分方程与欧拉法

微分方程概述 微分方程在各个领域应用颇多。 形如 [图片] 的微分方程表示了系统的变化信息, 如果在加上初始条件(x0,y0),那么就可以求出系统整体...

1845
来自专栏人工智能

通过JS库Encog实现JavaScript机器学习和神经学网络

在本文中,你会对如何使用 JavaScript 实现机器学习这个话题有一些基本的了解。

1.3K10
来自专栏灯塔大数据

干货|2017校招数据分析岗位笔试/面试知识点

2017校招正在火热的进行,后面会不断更新涉及到的相关知识点。 尽管听说今年几个大互联网公司招的人超少,但好像哪一年都说是就业困难,能够进去当然最好,不能进去...

3476
来自专栏AI研习社

我们分析了最流行的歌词,教你用 RNN 写词编曲(附代码)

翻译 | 余若男 李振 吴章勇 整理 | 凡江 此文展示了基于 RNN 的生成模型在歌词和钢琴音乐上的应用。 介绍 在这篇博文中,我们将在歌词数据...

2784
来自专栏钱塘大数据

32类计算机与数学领域最为重要的算法

导读: 奥地利符号计算研究所的Christoph Koutschan博士在自己的页面上发布了一篇文章,提到他做了一个调查,参与者大多数是计算机科学家,他请这些科...

2758
来自专栏小鹏的专栏

一个隐马尔科夫模型的应用实例:中文分词

什么问题用HMM解决 现实生活中有这样一类随机现象,在已知现在情况的条件下,未来时刻的情况只与现在有关,而与遥远的过去并无直接关系。 比如天气预测,如果我...

2867
来自专栏IMWeb前端团队

CSS3的3D变换和动画

CSS3的3D变换 transform属性 attr des css level transform 向元素应用 2D 或 3D 转换。 3 ...

1906
来自专栏PPV课数据科学社区

2017校招数据分析岗笔试/面试知识点

2017校招正在火热的进行,后面会不断更新涉及到的相关知识点。尽管听说今年几个大互联网公司招的人超少,但好像哪一年都说是就业困难,能够进去当然最好,不能进去是不...

3057
来自专栏PPV课数据科学社区

【学习】R语言与机器学习学习笔记(2)决策树算法

算法二:决策树算法 决策树定义 首先,我们来谈谈什么是决策树。我们还是以鸢尾花为例子来说明这个问题。 观察上图,我们判决鸢尾花的思...

3409
来自专栏程序员宝库

使用 JavaScript 实现机器学习和神经学网络

英文:JeffHeaton 译文: 云+社区/白加黑大人 https://cloud.tencent.com/developer/article/103589...

35710

扫码关注云+社区