变换 transform

实验网站

规则

transform: rotate(a) scale(b) skew(c) translate(x, y);

用于对平面元素做矩阵变换

参数

rotate(a)
- 单位：deg 或 turn 或 grad
- 意义：顺时针旋转 a(度) 或 a(转) 或a(倾斜度)
  - 可取负数，代表逆时针转，多用于需要区分方向的动画效果
  - 静态旋转时只用正数就行，方向无需区分
  - 360deg <==> 1turn <==> 400grad
  - 可用来实现歪歪扭扭的照片墙
- 例子：
  - 45deg <==> 顺时针45度
  - -45deg <==> 逆时针45度 <==> 静态时等价于顺时针315度
  - 180deg <==> 顺时针旋转180度 <==> 静态时等价于逆时针180度
  - -0.5turn <==> 逆时针旋转180度
- 这里rotate本质上是rotateZ，是围绕着一根z轴在做平面旋转
  - 另外还有rotateX和rotateY，是围绕x轴或y轴做3D旋转
    - 这种情况下，当旋转90deg时，基本就成了一条看不见的线
- 旋转的中心可以改变
```
transform-origin: 取值;
```
  - 默认不设置时，围绕“中心”旋转
  - 取值有两种类型，均等价
    - 关键字
      - top left: 左上
      - top center或top: 靠上居中
      - center right或right: 靠右居中
      - bottom right: 右下
    - 百分比(更灵活)
      - 0 0 : 左上
      - 50% 0 : 靠上居中
      - 0 50%: 靠右居中
      - 100% 100% : 右上
scale(b)
- 无单位，纯数字
- 意义: 整体缩放 b(倍)
- 例子
  - 0.5 <==> 缩小至0.5倍
  - 2 <==> 放大至两倍
- 可单独scaleX或scaleY使用
  - 代表仅在某个方向上拉伸 b(倍)
skew(x, y)
- 单位：deg
- 意义: 左上点和右下点横向扯出 x(度)，左上点和右下点纵向扯出 y(度)
  - 可取负数，代表扯点取反，改为左下点和右上点
  - 最好控制在 -90deg 到 90deg 之间，否则容易翻车
- 例子
  - (30deg, 0) <==> 左上点朝左扯，右下点朝右扯
  - (0, 30deg) <==> 左上点朝上扯，右下点朝下扯
  - (-30deg, 0) <==> 左下点朝左扯，右上点朝右扯
  - (0, -30deg) <==> 左下点朝下扯，右上点朝上扯
  - (30deg, 30deg) <==> 左上点朝左上方扯，右下点朝右下方扯
- 可单独 skewX 或 skrwY 使用
  - 代表仅在某个方向上扯
translate(x, y)
- 单位：px
- 意义: 横向右移 x(像素) ，并纵向下移 y(像素)
  - 可取负数，代表反方向移
- 例子
  - (100px，0) <==> 向右移 100 像素
  - (0，200px) <==> 向下移 200 像素
  - (100px，200px) <==> 向右下方移，水平x轴右移 100 像素，垂直y轴下移 200 像素
  - (-25px, -50px) <==> 向左上方移，水平x轴左移 25 像素，垂直y轴上移 50 像素
- 可单独 translateX 或 translateY 使用
  - 代表仅在某个方向上移动，而另一方向的移动量为0

例子1

transform: rotate(45deg) scale(0.6) skew(30deg, 30deg) translate(50px, 50px);

例子2

transform: matrix();

兼容性前缀

transform:
-webkit-transform:
-moz-transform:
-o-transform:

Keyboard shortcuts

变换 transform

实验网站

规则

参数

例子1

例子2

兼容性前缀