#博学谷IT学习技术支持#
目录
目录
1.空间转换
目标:使用
transform
属性实现元素在空间内的位移、旋转、缩放等效果。
空间:是从坐标轴角度定义的。
x 、y 和z
三条坐标轴构成了一个立体空间,
z轴位置与视线方向相同。
空间转换也叫
3D转换,属性:transform
![](https://i-blog.csdnimg.cn/blog_migrate/fb636066719897ffe12645cce6893b01.png)
1.1.空间位移
目标:使用translate实现元素空间位移效果
语法:
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
取值(
正负
均可):
像素单位数值
百分比
1.2 透视
目标:使用perspective属性实现透视效果
属性
(添加给父级):
perspective: 值;
取值:像素单位数值, 数值一般在
800 – 1200
。
作用:
空间转换时,为元素添加
近大远小、近实远虚
的
视觉效果
透视距离也称为视距,所谓的视距就是
人的眼睛到屏幕的距离:
![](https://i-blog.csdnimg.cn/blog_migrate/59820d03081493d72fe00935f2df8f9f.png)
1.3 空间旋转
目标:使用
rotate
实现元素
空间旋转
效果
语法:
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);
![](https://i-blog.csdnimg.cn/blog_migrate/84768ec70f9d44e4df4c3e3caacbf958.png)
左手法则:
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向:
拓展:
rotate3d(x, y, z, 角度度数) :用来设置自定义旋转轴的位置及旋转的角度
x,y,z 取值为0-1之间的数字
1.4 立体呈现
目标: 使用transform-style: preserve-3d呈现立体图形
使用perspective透视属性不能呈现立体图形,perspective只增加近大远小、近实远虚的视觉效果。
实现方法:
添加
transform-style: preserve-3d;
使子元素处于真正的
3d空间
呈现立体图形步骤:
1. 盒子
父元素添加transform-style: preserve-3d
;
2. 按需求设置子盒子的
位置(位移或旋转):
![](https://i-blog.csdnimg.cn/blog_migrate/ea61f7aa15373779ee48ebebff90bc1c.png)
注意:
空间内,转换元素都有自已独立的坐标轴,互不干扰
1.5 空间缩放
目标:使用scale实现空间缩放效果
语法:
transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);
2.动画
目标:使用
animation
添加
动画
效果
过渡:可以实现
2个状态间的变化过程,
动画效果:实现
多个状态
间的变化过程,动画
过程可控
(重复播放、最终画面、是否暂停)。
动画的本质是快速切换大量图片时在人脑中形成的具有
连续性的画面
构成动画的最小单元:帧或动画帧
实现步骤:
1. 定义动画:
2. 使用动画:
动画属性:
目标:使用animation相关属性控制动画执行过程
注意:
动画名称和动画时长必须赋值
取值不分先后顺序
如果有2个时间值,第一个时间表示动画时长,第二个时间表示延迟时间
动画属性:
属性 | 作用 | 取值 |
animation-name
|
动画名称
| (自定义) |
animation-duration
|
动画时长
| 单位:s |
animation-delay
|
延迟时间
| 单位:s |
animation-fill-mode
|
动画执行完毕时状态
|
forwards:最后一帧状态
backwards:第一帧状态
|
animation-timing-function
|
速度曲线
|
steps(数字):逐帧动画
|
animation-iteration-count
|
重复次数
| infinite为无限循环 |
animation-direction
|
动画执行方向
|
alternate为反向
|
animation-play-state
|
暂停动画
|
paused为暂停,通常配合:hover使用
|
注意:
红色字体为常用属性,黑色字体需了解
表格中的属性为拆分写法,可以单独设置动画的某一属性,截图中的属性为组合写法,二者属性值一样,需要哪个属性,写对应属性值
逐帧动画:
帧动画。开发中,一般配合
精灵图
实现动画效果。
animation-timing-function: steps(N);
将动画过程
等分
成N份
精灵动画制作步骤:
准备显示区域
设置盒子尺寸是一张小图的尺寸,背景图为当前精灵图
定义动画
改变背景图的位置(移动的距离就是
精灵图的宽度
)
使用动画
添加速度曲线
steps(N)
,N与精灵图上小图
个数相同
添加无限重复效果
![](https://i-blog.csdnimg.cn/blog_migrate/ef1a5ec2ebe4e1b955984dfe240694f9.png)
以上图为例,小人在显示区域奔跑,效果看起来还不错,但是不符合实际,跑起来的话不应该停在原地,
如果想让小人跑远一些 ,
该如何实现?
精灵动画的同时添加盒子位移动画
小人原地跑起来是添加了动画1:盒子背景图片位置改变的属性,
想要小人能跑远,可以添加动画2:盒子本身位置改变(比如左外间距变大,或者设置定位,left值增大):
![](https://i-blog.csdnimg.cn/blog_migrate/a1b8f46856bcd16bfae70f1395ffbfea.png)