首页 技术 正文
技术 2022年11月7日
0 收藏 749 点赞 429 浏览 858 个字

一  2D转换

转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、变形、缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果。

1、移动 translate(x, y) 可以改变元素的位置,x、y可为负值;

2、缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x、y的取值可为小数,不可为负值;

4、旋转 rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针;

5、倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜

二  3D转换

1、3D坐标轴

用X、Y、Z分别表示空间的3个维度,三条轴互相垂直。如下图

CSS3中的2D和3D转换知识介绍

2、左手坐标系

伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方。这样我们就建立了一个左手坐标系,拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图

CSS3中的2D和3D转换知识介绍

3、左手法则

左手握住旋转轴,竖起拇指指向旋转轴正方向,正向就是其余手指卷曲的方向。

三   动画

动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。

1、必要元素:

a、通过@keyframes指定动画序列;

b、通过百分比将动画序列分割成多个节点;

c、在各节点中分别定义各属性

d、通过animation将动画应用于相应元素;

2、关键属性

a、animation-name设置动画序列名称

b、animation-duration动画持续时间

c、animation-delay动画延时时间

d、animation-timing-function动画执行速度,linear、ease等

e、animation-play-state动画播放状态,play、paused等

f、animation-direction动画逆播,alternate等

g、animation-fill-mode动画执行完毕后状态,forwards、backwards等

h、animation-iteration-count动画执行次数,inifinate等

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,966
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,487
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,332
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,115
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,748
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,783