目录

• HTML5CSS3基础
• 1 2D 转换
  • 1.1 二维坐标系
  • 1.2 2D 转换之移动 translate
  • 1.3 2D 转换之旋转 rotate
  • 1.4 2D 转换中心点 transform-origin
  • 1.5 2D 转换之缩放 scale
  • 1.6 2D 转换综合写法
  • 1.7 2D 转换总结
• 2 动画
  • 2.1 动画的基本使用
  • 2.2 动画常用属性
  • 2.3 动画简写属性
  • 2.4 速度曲线细节
• 3 3D 转换
  • 3.1 三维坐标系
  • 3.2 3D移动 translate3d
  • 3.3 透视 perspective
  • 3.4 3D旋转 rotate3d
  • 3.5 3D呈现 transform-style
  • 3.6 浏览器私有前缀

HTML5CSS3基础

1 2D 转换

转换（transform）是 CSS3 中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。

• 移动：translate
• 旋转：rotate
• 缩放：scale

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

1.语法

transform: translate(x,y); 或者分开写
transform: translateX(n);
transform: translateY(n);

2.重点

• 定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素。
• translate最大的优点：不会影响到其他元素的位置。
• translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
• 对行内标签没有效果。

2D 旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

1.语法：

transform: rotate(度数)

2.重点

• rotate 里面跟度数。单位是 deg 比如 rotate(45deg)
• 角度为正时，顺时针，负时，为逆时针
• 默认旋转的中心点时元素的中心点

我们可以设置元素转换的中心点。

1.语法

transform-origin: x,y;

2.重点

• 注意后面的参数 x 和 y 用空格隔开
• x y 默认转换的中心点是元素的中心点（50% 50%）
• 还可以给 x y 设置 像素 或者 方位名词（top bottom left right center ）

缩放，顾名思义，可以放大和缩小。只有给元素添加上了这个属性就能控制它放大还是缩小。

1.语法

transform: scale(x,y);

2.注意

• 注意其中的 x 和 y 用逗号分隔

• transform:scale(1,1) ：宽和高放大一倍，相当于没有放大

• transform:scale(2,2) ：宽和高都放大了2倍

• transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)

• transform:scale(0.5,0.5) ：缩小

• scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子