CSS动画(1)-transform

总字数 823

预计阅读时间 3 分钟

CSS3当中与动画有关的属性有 :

该属性只对block级元素生效

语法格式

transform:  <transform-function> [<transform-function>]* | none

也就是说这个属性对应的值可以是none , 代表不进行任何变形
也可以使用一个或多个变形函数
多个函数之间是以空格进行分割
函数有以下几类 ( 每一类都有若干个分功能的函数 , 类似于margin与margin-top的关系 )

直接使用同名的函数表示2D旋转
参数是旋转的角度

1
2
3

.rotate_div {
  transform : rotate(30deg);
}

rotate

deg是旋转的角度 , 正数表示顺时针旋转 , 负数表示逆时针旋转
也可以使用trun作为单位 , 表示一周 , 比如0.25turn实际就是90度

同名函数接受2个参数 , 分别表示在X轴和Y轴上的移动距离 , 正数代表向该轴的正方向移动 , 负数代表向负方向移动

1
2
3

.translate_div {
  transform : translate(100px, 20px);
}

translate-x-y

同名函数接受两个参数 , 分别表示在X轴和Y轴上的缩放比例 , 大于1是放大 , 小于1是缩小

1
2
3

.scale_div {
  transform : scale(2, 1.5);
}

scale-x-y

同名函数可以提供1或者2个参数 , 如果只提供1个参数 , 代表在X轴方向的倾斜角度
如果提供两个参数 , 分别代表在X轴和Y轴方向的倾斜角度

1
2
3

.skew_div {
  transform : skew(30deg, 10deg);
}

skew-x-y

同样有 skewX 与 skewY , 与上面的几个函数类似 , 不过没有Z轴方向的

旋转与倾斜 , 都与元素的基点有关系 , 默认情况下这个基点位于元素的中心
可以使用transform-origin属性来改变该元素的基点
这个属性的值可以是1~3个 , 可以使用长度值百分比关键字( 如top left等 )