css3_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
)
作者:零寂
链接:https://juejin.cn/post/6918049507884138510
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。