1.简介
- CSS3动画效果包括三个部分:变形(transform)、过渡(transition)、动画(animation)
- 在实际开发中,元素的各种变形效果,如平移、缩放、旋转、倾斜等。再CSS3中,我们可以使用transform属性来实现元素的变形效果
2.平移:translate()
- 语法:
- transform:translateX() 按照W3C坐标系,按照X轴的方向移动
- transform:translateY() 按照W3C坐标系,按照Y轴的方向移动
- transform:translate(X,Y) 按照W3C坐标系,同时按照X、Y轴的方向移动
- 注意:(重点理解)
- 是否会将行内元素转为块元素:不会将行内元素转换为块元素
- 是否影响布局:移动之后不会影响整体布局,类似于定位布局(relative),也就是说设置它之后,元素不会变成脱离文档流(不会按照块级、行级格式上下文的规定去布局盒子,而是元素不再占据默认分配的空间,它下面的元素会上去补位),不管是向X轴、Y轴平移,下一个元素的布局都是按照该平移元素原来的位置(大小)进行布局的
- 移动方式:只是针对于原始位置进行水平、垂直移动
3.缩放:scale()
- 语法:
- transform:scaleX() 按照W3C坐标系,按照X轴的方向缩放
- transform:scaleY() 按照W3C坐标系,按照Y轴的方向缩放
- transform:scale(X,Y) 按照W3C坐标系,同时按照X、Y轴的方向缩放
- 缩小:给的值由 0-1
- 放大:给的值大于 1
- 注意:(重点理解)
- 是否会将行内元素转为块元素:不会将行内元素转换为块元素
- 是否影响布局:缩放之后不会影响整体布局,设置它之后,元素不会变成脱离文档流(不会按照块级、行级格式上下文的规定去布局盒子,而是元素不再占据默认分配的空间,它下面的元素会上去补位),不管缩小还是放大,下一个元素的布局都是按照该缩放元素原来的位置(大小)进行布局的
- 缩放方式:只是针对于元素中心原点进行水平、垂直缩放
4.倾斜:skew()
- 语法:
- transform:skewX() 按照W3C坐标系,按照X轴的方向倾斜
- transform:skewY() 按照W3C坐标系,按照Y轴的方向倾斜
- transform:skew(X,Y) 按照W3C坐标系,同时按照X、Y轴的方向倾斜
- 值的单位:deg(度)
- 注意:(重点理解)
- 是否会将行内元素转为块元素:不会将行内元素转换为块元素
- 是否影响布局:倾斜之后不会影响整体布局,设置它之后,元素不会变成脱离文档流(不会按照块级、行级格式上下文的规定去布局盒子,而是元素不再占据默认分配的空间,它下面的元素会上去补位),不管朝X轴、Y轴倾斜,下一个元素的布局都是按照该倾斜元素原来的位置(大小)进行布局的
- 倾斜方式:只是针对于元素中心原点进行倾斜
5.旋转:rotate()
- 语法:
- transform:rotate()
- 值的单位:deg(度)
- 注意:(重点理解)
- 是否会将行内元素转为块元素:不会将行内元素转换为块元素
- 是否影响布局:旋转之后不会影响整体布局,设置它之后,元素不会变成脱离文档流(不会按照块级、行级格式上下文的规定去布局盒子,而是元素不再占据默认分配的空间,它下面的元素会上去补位),下一个元素的布局都是按照该旋转元素原来的位置(大小)进行布局的
- 旋转点的选择:在于设置的中心原点
6.中心原点:transform-origin
- 语法:
- transform-origin:取值
- 取值
- 关键字,如left center(左边框中间点)、center center(中心点)、top right(上边框最右边点)等
- 长度值,单位px、em和%等