/* 移动盒子的位置： 定位、盒子的外边距、2d转换移动 */

  1. 2D 转换

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

    • 移动： translate 【位移】

    • 旋转： rotate

    • 缩放： scale

  2. translate 语法

    • x 就是 x 轴上水平移动
    • y 就是 y 轴上水平移动
    transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)

  3. 重点知识点

    • 2D 的移动主要是指 水平、垂直方向上的移动
    • translate 最大的优点就是不影响其他元素的位置
    • translate 中的100%单位，是相对于本身的宽度和高度来进行计算的，如translate:(50%,50%)
    • 行内标签没有效果

  4. 代码演示

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)
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 移动盒子的位置： 定位、盒子的外边距、2d转换移动 */
        
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔*/
            /* transform: translate(x, y); */
            /* transform: translate(100px, 100px); */
            /* 1. 我们如果只移动x坐标 */
            /* transform: translate(100px, 0); */
            /* transform: translateX(100px); */
            
            /* 2. 我们如果只移动y坐标 */
            /* transform: translate(0, 100px); */
            /* transform: translateY(100px); */
        }
        
        div:first-child {
            transform: translate(30px, 30px);
        }
        
        div:last-child {
            background-color: purple;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>

0059 2D转换transform 之 translate_外边距