目录
Transform
perspective属性
perspective-origin属性
transform-style属性
Animation
Animation的简化版本transition
首页 web前端 html教程 css变换transform和动画animation_html/css_WEB-ITnose

css变换transform和动画animation_html/css_WEB-ITnose

Jun 21, 2016 am 08:58 AM

Transform

我们在写网页的时候是不是大多数时候在操纵二维空间,但是在position绝对定位的时候,我们遇到了z轴,是不是可以理解为开辟了一个新的空间维度呢,但这也只是简单的层叠,css里有更强大的属性:Transform 。

从字面上就能看出,Transform 是 "变型 的意思,他的值主要包括

  • 旋转rotate

  • 扭曲skew

  • 缩放scale

  • 移动translate

  • 矩阵变形matrix

以rotate为例,
3D Transform 中 rotate 有三种方法,rotateX(angle) X轴旋转,rotateY(angle) Y轴旋转,rotateZ(angle) Z轴旋转。
XYZ表示一个平面以哪个轴为坐标来旋转,里面的值是他的角度。为了更形象一点,请看这张图。

从几何学上来说,面旋转为体,这虽然还没有说到3D,但是已经隐约有了3d的概念了。
然后就要说到一个很重要的属性,perspective。

perspective属性

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

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

transform: perspective(800);
登录后复制
  • 或者直接使用 perspective 属性:

perspective: 800;
登录后复制

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


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

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

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

perspective-origin属性

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

transform-style属性

当有了透视,有了变型之后,就该用到transform-style这个属性了,他有两个参数,flat与preserve-3d。flat为默认值,表示平面的;后者preserve-3d表示3D透视。
大家可以简单的理解为这是开启3D空间的方法 :
transform-style: preserve-3d;
仅仅是开关,这个属性不会对我们的画面造成任何影响,除非你用flat。
3D世界里还有一个原理就是,你无法穿过一个物体看到他后面的物体,除非这个物体是透明的,这里我们就用到一个属性,backface-visibility,当他的值为hidden的时候,就是正常的3D世界。

Animation

现在简单的几何原理都有了,我们可以让平面变3D的过程动态的演示出来了,就是css3的 Animation。
在了解Animation之前,我们必须了解另一个特殊的东西,Keyframes。

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

@-moz-keyframes name{     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);     }  }
登录后复制

这里,name是动画的名称,百分比里边只要写你要实现的动画就行,可以写位移啊,色值变化啊,透明度变化啊等等。
然后我们再看一下Animation的几个常用属性:

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

Animation的简化版本transition

搜集资的时候发现还有一个transition过度属性,据说他可以称为animation的简化版本。因为animation属性比transition属性多包含keyframes规则显式控制当前帧的属性,因而更加灵活。
例如:

.contain{width: 392px; position: relative; bottom: -20px; opacity: 0;}.contain.on{ bottom: 0; opacity: 1;-webkit-transform:translate(-100px,100px); transition:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;  -webkit-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;-moz-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;-ms-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;-o-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;  }当符合某种条件时为contain添加.on类,即可有立即x移动-100px,y移动100px,历时1500ms;延时2s 历时500ms的“由下往上 由透明变为实体”的动画效果。注意针对性写,而不是写all ease-in 500ms;性能太低语法:transition: property duration timing-function delay;
登录后复制

但是需要注意的是:火狐浏览器对于transition最后一个数值要求很严格,如果延时为0时我们往往会忽略后面的S,则火狐上无效果!
transition 遇到的特殊问题:
.aa完成设定动作之后会恢复原样,换做animation 设置forwards属性依旧会恢复原样。
解决方案:将.aa{display:inline-block;}或者设置为display:block;

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? 公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?

如何使用HTML5表单验证属性来验证用户输入? 如何使用HTML5表单验证属性来验证用户输入? Mar 17, 2025 pm 12:27 PM

如何使用HTML5表单验证属性来验证用户输入?

< iframe>的目的是什么。 标签?使用时的安全考虑是什么? < iframe>的目的是什么。 标签?使用时的安全考虑是什么? Mar 20, 2025 pm 06:05 PM

< iframe>的目的是什么。 标签?使用时的安全考虑是什么?

如何高效地在网页中为PNG图片添加描边效果? 如何高效地在网页中为PNG图片添加描边效果? Mar 04, 2025 pm 02:39 PM

如何高效地在网页中为PNG图片添加描边效果?

< meter>的目的是什么。 元素? < meter>的目的是什么。 元素? Mar 21, 2025 pm 12:35 PM

< meter>的目的是什么。 元素?

HTML5中跨浏览器兼容性的最佳实践是什么? HTML5中跨浏览器兼容性的最佳实践是什么? Mar 17, 2025 pm 12:20 PM

HTML5中跨浏览器兼容性的最佳实践是什么?

< datalist>的目的是什么。 元素? < datalist>的目的是什么。 元素? Mar 21, 2025 pm 12:33 PM

< datalist>的目的是什么。 元素?

> gt;的目的是什么 元素? > gt;的目的是什么 元素? Mar 21, 2025 pm 12:34 PM

> gt;的目的是什么 元素?

See all articles