transform-translate位移 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 1000px;
            margin:100px auto;
        }

        .box>div{
            width: 300px;
            height:150px;
            border: 1px solid #000;
            background-color: red;
            float: left;
            margin-right: 30px;
        }

        div:nth-child(2){
            background-color: pink;
            transition:all 1s;
        }
        /* translate:(水平位移，垂直位移)；
            正值：向右向下
            负值：向左向上
            如果只写一个值 水平移动
            百分比 ：相对于自身移动

        */
        div:nth-child(2):hover{
            transform:translate(-50%,-50%);
        }
    </style>

</head>
<body>
<div class="box">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</div>

</body>
</html>

 

posted @ 2020-08-13 12:24  zhuyapeng  阅读(986)  评论(0)    收藏  举报