CSS3变形（2D）

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和%等