transform定义

transform属性允许元素平移、旋转、缩放、倾斜。

平移

transform:translate(x, y);

值个数

  • 一个值时，设置x轴上的位移

  • 二个值时，设置x轴和y轴上的位移

值类型

  • 数字：100px

  • 百分比：参照元素本身（ refer to the size of bounding box ）

缩放

transform:scale(x);

1保持不变，大于一放大，小于1缩小

值个数

  • 一个值时，设置x轴上的缩放

  • 二个值时，设置x轴和y轴上的缩放

旋转

transform:rotate(deg);

deg：旋转的角度

  • 正数为顺时针旋转

  • 负数为逆时针旋转

旋转的原点默认是元素的中心点，可以通过transform-origin属性改变原点。

transform-origin属性值

  • length：从左上角开始计算

  • left, center, right, top, bottom关键字

  • 百分比：参考元素本身大小

比如：transform-origin:0 0;