一、基本介绍

1
2
3
4
5
6
7
transform # 变形

transition # 过渡

animation # 自定义动画

perspective # 指定透视距离,用于 3D 效果

二、transform

2.1 移动(translate)

功能:让元素进行位移

语法:

1
2
3
4
5
6
7
8
9
10
11
translateX(x) # X 轴(水平)方向位移

translateY(y) # Y 轴(垂直)方向位移

translateZ(z) # Z 轴(前后)方向位移,需要设置 perspective 属性才生效

复合写法:

translate(x,y)

translate3d(x,y,z)

单位:px,em,rem,百分比。

方向:水平向右为正,垂直向下为正,往前为正,

演示(移动下边的滑块):

2.2 旋转(rotate)

功能:让元素绕中心点旋转

语法:

1
2
3
4
5
6
7
8
9
10
11
rotateX(x) # 绕 X 轴上的旋转

rotateY(y) # 绕 Y 轴上的旋转

rotateZ(z) # 绕 Z 轴上的旋转,不需要设置 perspective 属性

复合写法:

rotate(x,y)

rotate3d(x,y,z)

单位:deg

方向:顺时为正,逆时为负。旋转中心点位置由 transform-origin 属性决定,默认以元素中心为旋转点。

演示(移动下边的滑块):

2.3 缩放(scale)

功能:让元素以中心点进行缩放

语法:

1
2
3
4
5
6
7
8
9
10
11
scaleX(x) # X 轴(水平)方向缩放

scaleY(y) # Y 轴(垂直)方向缩放

scaleZ(z) # Z 轴(前后)方向缩放,用于 3D 效果

复合写法:

scale(x,y)

scale3d(x,y,z)

单位:无

演示(鼠标放到方块中):

由于演示的 div 是 2D 平面,因此位于 3D 空间也无法查看其在 Z 轴方向缩放的效果。

2.4 扭曲(skew)

功能:让元素绕中心点进行扭曲

语法:

1
2
3
4
5
6
7
skewX(x) # X 轴(水平)方向扭曲

skewY(y) # Y 轴(垂直)方向扭曲

复合写法:

skew(x,y)

单位:deg

方向:顺时为正,逆时为负

演示(移动下边的滑块):

2.5 矩阵变形:matrix()

上述 4 种动画方式功能的底层都是通过 matrix() 实现的

1
2
3
4
5
6
7
translate(tx,ty)==matrix(1,0,0,1,tx,ty)

scale(sx,sy)==matrix(sx,0,0,sy,0,0)

rotate(θ)==matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

skew(θx,θy)==matrix(1,tan(θy),tan(θx),1,0,0)

掌握上述4种即可。

三、transition

功能:在一定的时间内平滑地把属性值从起始状态改到结束状态

语法:transition 属性 耗时 速度曲线 延时

默认值:all 0s ease 0s;

演示(鼠标放到方块中):

四、animation

功能:让元素实现动画效果,效果比前两个属性更强大。

语法:animation 动画名称 持续时间 速度曲线 延时 循环次数 方向 动画结束状态 动画状态

演示:

五、perspective

功能:指定观察者与「z=0」平面的距离,使具有三维位置变换的元素产生透视效果。

根据下图理解:

其中,中间矩形表示浏览器,矩形左侧表示观察者观察视点,矩形右侧表示浏览器中的图像世界(2D/3D)。

演示:

未设置 perspective 属性,元素即便 X 轴旋转 45 度后,左右两边的线还是平行的,未体现 3D 效果。

设置 perspective 属性,元素进过旋转角度后查看的效果产生 3D 效果。

该属性主要设置在父级元素上。

六、参考资料