2D 转换 transform —— 元素的位移、旋转、缩放

一、2D转换之移动 —— translate

translate 可以改变元素在页面中的位置，类似定位，可以沿着 X 轴和 Y 轴移动元素。

translate 最大的优点：不会影响到其他元素的位置。

1、沿 x 轴移动

  /* 沿 x 轴向右移动 100px */
  transform: translateX(100px);

  /* 沿 x 轴向右移动自身宽度的 50% */
  transform: translateX(50%);

2、沿 y 轴移动

  /* 沿 y 轴向下移动 50px */
  transform: translateY(50px);

  /* 沿 y 轴向下移动自身高度的 50% */
  transform: translateY(50%);

3、同时沿 x轴、 y 轴移动

  /* 沿 x 轴向右移动 100px，沿 y 轴向下移动 50px */
  transform: translate(100px, 50px);

  /* 沿 x 轴向右移动自身宽度的 50%，沿 y 轴向下移动自身高度的 50% */
  transform: translate(50%, 50%);

二、2D转换之旋转 —— rotate

rotate 可以让元素在二维平面内顺时针或者逆时针旋转。

  /* 角度为正，顺时针旋转 */
  transform: rotate(45deg);

  /* 角度为负，逆时针旋转 */
  transform: rotate(-45deg);

我们可以用 transform-origin 来设置 元素转换的中心点。 在旋转时，默认的旋转中心点是元素的中心点，也就是 (50%, 50%)。

  /* 语法：*/
  transform-origin: x y;

• x 、y 可以设置为百分数，分别相对于元素的宽度和高度；
• x 、y 可以设置为具体的像素值；
• x 、y 可以设置为方位名词：top bottom left right center

  /* 将转换中心点设置为元素左上角，并顺时针旋转45度 */
  transform-origin: left top;
  transform: rotate(45deg);

三、2D转换之缩放 —— scale

scale 可以控制元素放大或缩小。scale 也可以设置转换中心点进行缩放，并且不影响其他盒子。

  /* 宽和高都放大 2 倍 */
  transform: scale(2, 2);

  /* 宽和高都放大相同倍数，可以只写一个参数 */
  transform: scale(2);

  /* 值小于 0 是缩小，宽和高都缩小为原来的 0.5 */
  transform: scale(0.5, 0.5);

四、2D 转换的综合写法

同时使用多个转换，格式为：

  transform: translate(100px, 50px) rotate(45deg) scale(0.5);

需要注意的是：多个转换的顺序会影响转换的效果，当我们同时有位移和其他属性的时候，记得要将位移放到最前面（因为先旋转会改变坐标轴方向）。