【博学谷学习记录】超强总结，用心分享|前端基础

目录

2D&3D转换与动画

平面转换与空间转换transform

动画

2D&3D转换与动画

平面转换与空间转换transform

平面转换：改变元素在平面内的形态（位移、旋转、缩放...），也称为2D转换

位移：transform：translate（水平移动距离 垂直移动距离）；如果translate（）里面只给一个值，表示x轴方向移动距离；单独设置某个方向的移动距离translateX（）或translateY（）；取值正负均可：数字+px/百分比（x轴正数向右移动，y轴正数向下移动）

旋转：transform：rotate（角度+单位deg）；单独设置某一个的值rotateX（）或rotateY（）；取值正负均可，正数为顺时针旋转，负数为逆时针旋转

改变旋转圆点，默认旋转圆点为元素中心点transform-origin：水平位置 垂直位置；取值为数值+px/百分比（按照自身尺寸计算）/方位名词（left/right/bottom/top）

缩放：transform：scale（x轴缩放倍数，y轴缩放倍数）；一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放；单独设置某一个值scaleX（）/scaleY（）

空间：x，y，z三条坐标轴构成了一个立体空间，z轴与视线方向相同

空间转换：改变元素在空间内的形态（位移、旋转、缩放...），也称为3D转换，空间转换要依靠透视效果才能看出来

透视：perspective：数字+px；取值一般为800-1200；perspective属性添加给父级；透视的距离也称为视距，就是人眼睛到屏幕的距离，透视效果为近大远小，近清楚远模糊

立体呈现：transform-style：perspective-3d；添加给父元素，使子元素处于真正的3d空间

空间位移：transform：translate3d（x，y，z）；取值正负均可

空间旋转：transform：rotate3d（x，y，z，角度+单位deg）；自定义旋转轴的位置以及旋转角度，其中x，y，z取值为0-1之间的数字

空间缩放：transform：scale3d（x，y，z）；

动画

animation动画的本质是快速切换大量图片时在人大脑中形成的具有连续性的画面，构成动画的最小单元为帧或动画帧

步骤：

1. 定义动画：

①两种状态

@keyframes 动画名称 {

from{}

to{}

}

②多种状态

@keyframes 动画名称 {

0%{}

10%{}

......

100%{}

}

1. 使用动画animation：动画名称 动画花费时长；

animation复合属性：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；如果有两个时间值，第一个表示动画时长，第二个表示延迟时间

animation相关属性	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-fill-mode	动画执行完毕时状态	forwards最后一帧状态/backwards第一帧状态
animation-timing-function	速度曲线	step（数字）逐帧动画
animation-iteration-count	重复次数	infinite无限循环
animation-direction	动画执行方向	alternate反向
animation-play-state	暂停动画	paused暂停（通常配合：hover使用）