2D 转换之transform

• 「 2D转换之translate移动」

  • 2D转换是改变标签在二维平面上的位置和形状

  • 移动：translate

  • 旋转：rotate

  • 缩放：scale

• translate语法

  • x就是X轴上水平移动

  • y就是y轴上水平移动

  transform: translate(x, y)
  transform: translateX(n)
  transfrom: translateY(n)  

• 重点知识点

  • 2D的移动主要是指水平、垂直方向上的移动

  • translate最大的优点就是不影响其他元素的位置

  • translate中的100%单位，是相对于本身的宽度和高度来进行计算的

  • 行内标签没有效果

div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /* 平移 */
  /* 水平垂直移动 100px */
  /* transform: translate(100px, 100px); */

  /* 水平移动 100px */
  /* transform: translate(100px, 0) */

  /* 垂直移动 100px */
  /* transform: translate(0, 100px) */

  /* 水平移动 100px */
  /* transform: translateX(100px); */

  /* 垂直移动 100px */
  transform: translateY(100px);
  /*百分比用法*/
  transform: translateY(100%);   
}

让一个盒子水平垂直居中

div {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: pink;
    /* 1. 我们tranlate里面的参数是可以用 % */
    /* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
    /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
    /* transform: translateX(50%); */
    }
        
p {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background-color: purple;
    /1.* margin-top: -100px;
    margin-left: -100px; */
  
    /2.* translate(-50%, -50%)  
      盒子往上走自己高度的一半   */
    transform: translate(-50%, -50%);
  }
        
span {
    /* translate 对于行内元素是无效的 */
    transform: translate(300px, 300px);
     }

• 「 2D 转换之rotate旋转」

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

/* 单位是：deg */
img:hover {
  transform: rotate(360deg)
}

• rotate语法

  • rotate 里面跟度数，单位是 deg

  • 角度为正时，顺时针，角度为负时，逆时针

  • 默认旋转的中心点是元素的中心点

• 设置元素旋转的中心的(transform-origin)

  transform-origin: x y;

• 注意

  • 后面的参数 x 和 y 用空格隔开

  • x y 默认旋转的中心点是元素的中心(50% 50%),等价于center center

  • 还可以给x y 设置像素或者方位名词(top、bottom、left、right、center)

「 2D 转换之scale放大与缩小」

• scale的作用：用来控制元素的放大与缩小

transform: scale(x, y)

• 知识要点：

  • 注意，x与y之间用逗号进行分隔

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

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

  • transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致

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

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

   div:hover {
    /* 注意，数字是倍数的含义，所以不需要加单位 */
    /* transform: scale(2, 2) */
   
    /* 实现等比缩放，同时修改宽与高 */
    /* transform: scale(2) */
   
    /* 小于 1 就等于缩放*/
    transform: scale(0.5, 0.5)
   }

「2D 转换综合写法以及顺序问题」

知识要点

• 同时使用多个转换，其格式为 transform: translate() rotate() scale()

• 顺序会影响到转换的效果(先旋转会改变坐标轴方向)

• 当我们同时有位置或者其他属性的时候，要将位移放到最前面

div:hover {
  transform: translate(200px, 0) rotate(360deg) scale(1.2)
}