html:

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <link rel="stylesheet" href="../css/reset.css">
    9.     <link rel="stylesheet" href="../css/120变形.css">
    10. </head>
    11. <body>
    12.     <div class="box1"></div>
    13.     <div class="box2"></div>
    15.     <div class="box3"></div>
    16. </body>
    17. </html>

    css:
    （1）通过transform: translateX(百分数或者具体px);来移动元素，因为如果通过left,top等必须是块元素指定具体宽高后，才可以
    （2）两个块元素紧贴着时，使用transform: translateY();只是会覆盖，而不会推动下方元素移动
    （3）通过hover和transform和box-shadow;可以形成移动效果
    image.png

    .box1 {
    width: 200px;
    height: 200px;
    background-color: #bfa;
    margin: 100px auto;
    transform:translateX(50%);
    transform: translateY(50%);
}

.box2 {
    width: 200px;
    height: 200px;
    background-color: silver;
    margin: auto;
    margin-top: -100px;
    transform: translateZ(50%);
}

.box3 {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin-left: 50px;
}

.box3:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}