引言
感觉这四大部分的内容需要一起研究,才算是把三维立体空间的各种动态效果的最基础的知识点给吃透,我也一直想找到一个关于这部分比较全面系统且有案例来验证其中知识点的教程,也搜过不少次,可是都没有找到,只能各个地方查找,然后拼凑到一起,而且又不显得太过学术,要用通俗的手册式教程,来介绍给大家,所以就做了这个算是自己整理笔记的教程。
完整视频教程:
哔哩哔哩:CSS3专题01-2D变换+3D变换+过渡+动画-全解析
2D变换
位移:translate
translateX
translateY
- 一个参数:
translate(x)
,代表沿x
轴位移x
像素,y
轴默认为0
- 两个参数:
translate(x, y)
,代表沿x
轴和y
轴位移的距离 x
、y
单位为px
x
值:为正
则沿着x轴
向右
位移,为负
则沿着x轴
向左
位移y
值:为正
则沿着y轴
向下
位移,为负
则沿着y轴
向上
位移- 如果是通过
active
进行位移,执行完毕后会还原
- 单独写法:
translateX(x)
translateY(y)
- 位移的参考原点为元素
左上角
旋转:rotate
rotate(angle)
:参数只有一个- 参数为旋转的角度,单位为
deg
2d
空间只能围绕元素中心的z
轴旋转- 参数为
正
值则顺
时针旋转,为负
值则逆
时针旋转 - 默认为围绕元素
中心
为原点进行旋转
缩放:scale
- 一个参数:
scale(num)
,代表同时在x
轴和y
轴两个方向缩放相同的倍数 - 两个参数:
scale(x, y)
,分别代表x
和y
轴方向缩放相应的倍数 - 参数为数字,无单位
- 默认值为1倍,就是不缩放
- 默认为围绕元素
中心
为原点进行缩放
变形:skew
skewX
skewY
- 一个参数:
skew(x)
,代表沿x
轴变形x
角度,y
轴默认为0
- 两个参数:
skew(x, y)
,代表沿x
轴变形x
的角度,沿y
轴变形y
的角度 - 参数为变形的角度,单位为
deg
x
值:为正
则向左
变形,为负
则向右
变形y
值:为正
则向上
变形,为负
则向下
变形- 单独写法:
skewX(x)
skewY(y)
- 默认为围绕元素
中心
为原点进行变形
变换的原点
- 原点就是元素的中心,可以通过
transform-origin
属性改变原点位置 - 默认值为
transform-origin
:center
center
; - 除了
位移
(因为位移元素直接移跑了),别的变换(旋转
、缩放
、变形
)都是围绕原点变换的 - 原点关键字:
top
bottom
center
left
right
- 只设置一个的话,另一个为默认值
center
- 也可以使用
px
、em
、百分比值
(一般用不到) - 设置的偏移值都是从元素
左上角
开始的
变换的特点
- 变换之后的元素不会脱离
文档流
- 可以移出屏幕边缘或遮挡住旁边其他元素
- 行内元素需要改变元素的
display
为block
或inline-block
,或者改变其父元素的display
为flex
或grid
后,才能使用变换 - 可以使用
多重变换
,用空格
隔开,变换的每个值从右向左
依次执行,通常将平移放到首位,最后执行
3D变换
父元素样式
- 3D变换需要父元素设置样式才能保留3d的变化效果
- 保留3D变换:
transform-style: preserve-3d
,默认值为flat
表示不保留3D变换 - 设置视角深度:
perspective: 1000px
- 观察点位置:
perspective-origin
- 默认值为:
perspective-origin
:center
center
; - 第一个代表
x
轴上的位置,第二个值代表y
轴上的位置 - 取值可以为:关键字、长度值,百分比值(相对于当前元素的宽或高),可以为负值
- 可以设置的关键字:
top
bottom
center
left
right
- 上面关键字的顺序无关,浏览器会自动调整
top
==0%
bottom
==100%
center
==50%
left
==0%
right
==100%
- 设置的偏移值都是从元素
左上角
开始的
- 默认值为:
- 观察点位置:
位移:translate3d
translateX
translateY
translateZ
translate3d(x, y, z)
:必须传递三个参数translateX(x)
translateY(y)
translateZ(z)
- 参数单位为
px
x
值:为正
则沿着x轴
向右位移,为负
则沿着x轴
向右位移y
值:为正
则沿着y轴
向下位移,为负
则沿着y轴
向上位移z
值:为正
则沿着z轴
向屏幕外位移,为负
则沿着z轴
向屏幕内位移
旋转:rotate3d
rotateX
rotateY
rotateZ
rotate3d(x, y, z, angle)
:沿着x
,y
,z
三个方向矢量值确定的坐标点旋转angle
角度(比较少用)x
,y
,z
为三个方向的矢量值,无单位rotateX(angle)
rotateY(angle)
rotateZ(angle)
沿着元素中心点穿过的(X/Y/Z)轴旋angle
角度- 参数
angle
单位为deg
angle
值:为正
则为顺
时针旋转,为负
则为逆
时针旋转- 可以通过
transform-origin: left
来设置比如绕着元素的左边框旋转 backface-visibility
属性定义当元素旋转到背面向屏幕时是否可见visible
背面可见hidden
背面不可见
缩放:scale3d
scaleX
scaleY
scaleZ
scale3d(num, num, num)
:必须传递三个参数scaleX(x)
scaleY(y)
scaleZ(z)
,分别代表x
和y
轴和z
轴方向缩放相应的倍数- 参数为数字,无单位
scaleZ(z)
是难点,指的z轴方向上的纵深,并不会在z轴方向加厚元素,需要在父元素设置,然后观察子元素位移距离的增加
过渡:transition
- 概念:指元素从一种属性的取值逐渐变化为另一种同样属性的取值
- 由于需要慢慢改变取值,所以需要是可以量化的属性值才有过渡的效果
- 默认对所有属性设置过渡效果,持续时间为
0
- 最简单的设置过渡效果的写法:
transition: 1s;
使用过渡的属性名称:transition-property
- 定义应用过渡效果的属性名称列表。
- 取值:
- 单个或多个属性名称,多个属性用逗号隔开
none
:没有属性获得过渡效果。all
:所有属性都将获得过渡效果。- 不推荐设置为
all
,太耗性能,会遍历所有该元素的属性
- 不推荐设置为
过渡效果花费的时间:transition-duration
- 默认为
0
,没有过渡效果 - 单位为
s
或ms
过渡效果执行的时间曲线函数:transition-timing-function
- 默认为
ease
ease
:开始慢,中间快,结束慢linear
:匀速ease-in
:开始慢,结束快ease-out
:开始快,结束慢ease-in-out
:开始慢,中间快,结束慢(和ease稍有区别)cubic-bezier()
:函数定义了一个贝塞尔曲线(Cubic Bezier)。- 贝塞尔曲线曲线由四个点
P0
,P1
,P2
和P3
定义。P0
和P3
是曲线的起点和终点。P0
是(0
,0
)表示初始时间和初始状态,P3
是(1
,1
)表示最终时间和最终状态。 - 需要给此函数传递
P1
,P2
代表两个坐标点:cubic-bezier(x1,y1,x2,y2)
x1
和x2
的取值范围0
到1
之间的数字。
- 贝塞尔曲线曲线由四个点
过渡延时执行时间:transition-delay
- 默认为
0
,不延时 - 单位为
s
或ms
简写中各项的顺序
- transition(
transition-property
transition-duration
transition-timing-function
transition-delay
) - 默认值:
transition: all 0 ease 0;
动画:animation
- 对比过渡,过渡只有开始帧和结束帧,中间动画由浏览器完成
- 而动画可以设置多个关键帧,更加精确的控制元素样式的变化过程
创建动画:@keyframes
规则
- 定义动画的名称:
animation-name
(必需),和下面使用动画时候的动画名称对应 - 动画持续时间的百分比:
keyframes-selector
(必需)0%-100%
from
(和0%相同)to
(和100%相同)
- 一个或多个合法的CSS声明语句:
css-styles
(必需)
使用时候的动画名称:animation-name
keyframename
:指定关键帧动画的名称none
:没有动画
动画周期所用时间:animation-duration
- 默认为
0
动画效果执行的时间曲线函数:animation-timing-function
- 见上面过渡
transition-timing-function
属性。
元素初始状态与动画开始和结束状态的模式:animation-fill-mode
- 因为需要将元素的初始状态和动画的0%帧的元素样式分开,所以只有延时情况下才能看出这个属性值的作用
- 默认为
none
: 保留初始状态,不保留100%
帧状态 forwards
: 保留初始状态,保留100%
帧状态backwards
: 不保留初始状态(会立即变为0%
帧的样式),不会保留100%
帧状态both
: 不保留初始状态,会保留100%
帧状态
- 默认为
动画延时执行时间:animation-delay
- 默认为
0
动画播放次数:animation-iteration-count
- 默认为
1
动画在下一个周期动画播放方向:animation-direction
normal
:普通,默认值。按正常播放动画reverse
:反转,反向播放动画alternate
:轮询,在奇数次正向播放动画,偶数次反向播放动画alternate-reverse
:反转轮询,在奇数次反向播放动画,偶数次正向播放动画
动画是否正在运行或暂停:animation-play-state
默认为running
running
:默认值,运行动画paused
:暂停动画
简写中各项的顺序
- animation(
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
)