转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果（俗称：变性）

    1. 移动：translate
    2. 旋转：rotate
    3. 缩放：scale

    image.png
    image.png

    1. <style>
    3.     div{
    4.         width: 200px;
    5.         height: 200px;
    6.         background-color: green;
    7.         /* transform: translate(x,y);  */
    8.         transform: translate(100px,100px);
    9.         /* 1.只移动x坐标 */
    10.         transform: translateX(100px);
    11.         transform: translate(100px,0);
    13.     }
    14. </style>
    15. <body>
    16.     <div></div>
    17. </body>

    image.png
    优点：不会影响其他的盒子

    <style>
    div{
        width: 200px;
        height: 200px;
      }
          div:first-child{
        background-color: grey;
        transform: translate(20px,20px);
    }
    div:last-child{
        background-color: green;
    }
</style>
<body>
    <div></div>
    <div></div>
</body>

    image.png