关于前端: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);

须要留神的是：多个转换的程序会影响转换的成果，当咱们同时有位移和其余属性的时候，记得要将位移放到最后面（因为先旋转会扭转坐标轴方向）。