一、基本介绍

  1. transform # 变形
  2. transition # 过渡
  3. animation # 自定义动画
  4. perspective # 指定透视距离,用于 3D 效果

二、transform

# 2.1 移动(translate)

功能:让元素进行位移

语法:

  1. translateX(x) # X 轴(水平)方向位移
  2. translateY(y) # Y 轴(垂直)方向位移
  3. translateZ(z) # Z 轴(前后)方向位移,需要设置 perspective 属性才生效
  4. 复合写法:
  5. translate(x,y)
  6. translate3d(x,y,z)

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

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

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

# 2.2 旋转(rotate)

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

语法:

  1. rotateX(x) # 绕 X 轴上的旋转
  2. rotateY(y) # 绕 Y 轴上的旋转
  3. rotateZ(z) # 绕 Z 轴上的旋转,不需要设置 perspective 属性
  4. 复合写法:
  5. rotate(x,y)
  6. rotate3d(x,y,z)

单位:deg

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

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

# 2.3 缩放(scale)

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

语法:

  1. scaleX(x) # X 轴(水平)方向缩放
  2. scaleY(y) # Y 轴(垂直)方向缩放
  3. scaleZ(z) # Z 轴(前后)方向缩放,用于 3D 效果
  4. 复合写法:
  5. scale(x,y)
  6. scale3d(x,y,z)

单位:无

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

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

# 2.4 扭曲(skew)

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

语法:

  1. skewX(x) # X 轴(水平)方向扭曲
  2. skewY(y) # Y 轴(垂直)方向扭曲
  3. 复合写法:
  4. skew(x,y)

单位:deg

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

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

# 2.5 矩阵变形:matrix()

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

  1. translate(tx,ty)==matrix(1,0,0,1,tx,ty)
  2. scale(sx,sy)==matrix(sx,0,0,sy,0,0)
  3. rotate(θ)==matrix(cosθ,sinθ,-sinθ,cosθ,0,0)
  4. 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 效果。

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

六、参考资料