文档章节

H5中的3D转换和帧动画

 范泽鹏
发布于 2016/11/09 00:35
字数 824
阅读 52
收藏 3

Html5中的3D转换和Css3动画

(3)3D转换

(3.1)rotateX

让元素围绕着X轴进行旋转

(1)正值表示推到,负值表示鞠躬

(2)没有透视的3D是看不出来方向

(3.1)rotateY

围绕着Y轴进行旋转

(1)正数是逆时针 (站在右边推门),负数是顺时针(站在左边推门)

(2.1)定义元素背过去是否可见

backface-visibility: visible|hidden;

说明:visible表示可见,hidden表示不可见

测试贝塞尔曲线的网址:http://xuanfengge.com/easeing/ceaser/

(1)translateZ

就是在Z轴上来回移动,但是如果没有透视的情况下,完全看不出效果,所以,一般transform:translateZ()都是配合透视一起使用

小经验:translateZ和rotate结合会产生不一样的3D效果,不同的顺序的效果截然不同,如果先rotate 在translateZ 元素是在空间里面发生旋转 而如果是translateZ在rotate 元素是在直线上发生旋转

(2)透视 (景深)

perspective:值

说明:透视值越小,透视效果越强,值越大,透视效果越弱,透视添加在父级身上

(3)灭点(透视点,消失点)

perspective-origin:值

说明:值可以是像素,也可以是百分比,还可以是方位名词,默认值是50%,50%(中心点)

(4)transform-style

作用:规定被嵌套元素如何在3D空间中显示

tranform-style:值

值说明:flat是默认值,让子元素不保留其3D位置, preserve-3d  让子元素保留其3D位置 ,加在父亲身上

小总结:透视 灭点 transform-style都是添加在父级身上

关键: 当元素发生3D翻转的时候,整个坐标系也跟着发生了翻转!!

(5)css3的动画

animation:值

值说明:

(1)自定义动画名

(2)动画的持续时间 单位是s或者ms

(3)动画的曲线

(4)动画从何时开始

(5)控制动画执行的次数  没有单位, 一直执行:infinite

(6)控制动画是否逆序播放  默认值normal  逆序:alternate

(7)控制动画的播放和暂停  默认值是播放:running   暂停:paused

(8)动画最后的停留位置  forwards 让动画停留在最后一帧

动画一定要先写animation 然后搭配@keyframes去写自定义的动画

@前缀keyframes 自定义的动画名{

0%{

     //css语句

 }

    ...

100%{

        //css语句

    }

}

1  @keyframes laowang{

2                         0%{

3                                width:100px;

4                                height:100px;

5                                left:0;     

6                                transform:rotate(0deg);

7                         }

8                         50%{

9                                width:800px;

10                                     height:800px;

11                                     transform:rotate(720deg);

12                              }

13                              100%{

14                                     width:500px;

15                                     height:500px;

16                                     left:800px;

17                                     transform:rotate(-720deg);

18                              }

19                       }

(4)帧动画

steps(帧数)

其实就是让动画分成多少步去执行,steps()里面的数值是总画面数 - 1 ,在制作精灵图的时候每个画面的宽度尽量一致,并且建议在一行里面摆放

(5)animate.css库的使用

官网:https://daneden.github.io/animate.css/

作用:将一切常见的动画直接封装,开发者不需要考虑实现过程,只需要添加对应的类就能实现动画效果

使用步骤:

(1)将下载下来的animate.css 引入到你的项目中

(2)去官网获取想要的效果 给对应的元素添加上animated 类 (必填)和你想要的效果的类

 

© 著作权归作者所有

上一篇: jQuery概念
粉丝 3
博文 4
码字总数 9874
作品 0
上海
私信 提问
从手机端 H5 制作来看 WEB 动画的术与道

我们在微信朋友圈里经常看到很多人分享 H5 的链接,有的科技感十足,有的展示炫目,有的非常有创意,各大公司也把H5作为他们品牌传播,活动预热的很好方式。企业商户对于这种方式也很有好感,...

ES2049
03/05
0
0
从UI到AI——移动端H5生成技术漫谈

摘要 Houdini 为 CSS 提供动态编程能力,让开发者介入布局与渲染的过程,带来无限扩展性。分享会用数个例子演示 Houdini 的神奇效果,同时介绍其现状。 移动端网页动画 Css变换和动画 Css3早...

2018/06/06
0
0
深度测试: LayaAir H5游戏引擎裸跑性能超越Unity3D

深度测试: LayaAir H5游戏引擎裸跑性能超越Unity3D 《醉西游》H5版的出现,让游戏行业认识到HTML5 已经具备实现APP级的MMORPG类型的大型重度游戏的能力。LayaBox旗下第二代H5游戏引擎LayaA...

来亚盒子
2016/08/17
1K
0
CSS3的动画属性

transition、animation和transform是CSS3中三个制作动画的重要属性,本篇文章主要对其进行学习了解。 一、transition 允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击...

2017/12/26
0
0
年会也能这么玩?这很“阿里”!(内含全部构想和解决方案哦)

不用邀请函、不用签字板,“笑容”才是唯一的入场凭证。年会还有这样的操作? 最近在阿里巴巴内部就掀起这样一阵“笑容签到”风潮。在年会开场,大家是这样排队刷脸的: 而刷脸成功后,入场人...

阿里云科技快讯
2018/08/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

vmstat命令详解

https://www.cnblogs.com/ggjucheng/archive/2012/01/05/2312625.html

流光韶逝
36分钟前
1
0
如何理解算法时间复杂度的表示

先从O(1) 来说,理论上哈希表就是O(1)。因为哈希表是通过哈希函数来映射的,所以拿到一个关键 字,用哈希函数转换一下,就可以直接从表中取出对应的值。和现存数据有多少毫无关系,故而每次执...

yky20190625
52分钟前
5
0
分布式架构 实现分布式锁的常见方式

一、我们为什么需要分布式锁? 在单机时代,虽然不需要分布式锁,但也面临过类似的问题,只不过在单机的情况下,如果有多个线程要同时访问某个共享资源的时候,我们可以采用线程间加锁的机制...

太猪-YJ
今天
8
0
GitLab Docker 安装记录

安装环境 环境Centos7.4 64 1.拉取镜像文件 docker pull gitlab/gitlab-ce:latest 2.docker 安装 git.zddts.com 为访问域名或换成可以访问的IP docker run -d --hostname git.***.com -p ......

侠者圣
今天
0
0
EfficientNet: 再论 CNN 的网络规模

由于这里公式无法正常显示,所有内容以图片内容上传,如有需要,可提供 pdf 版。

爱吃草莓的皮卡丘
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部