transform---translate实例鼠标悬浮，图片移动_js 鼠标左右滑动 translate3d-CSDN博客

本文链接：https://blog.csdn.net/weixin_44730235/article/details/106890978

鼠标悬浮，图片向左移动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        ul {
            list-style:none;
        }
        h3 {
            font-size:16px;
            line-height:30px;
        }
        /* layer下的pro-list-item */
        .layer .pro-list-item {
            float:left;
            width:200px;
            height:200px;
            border:1px solid #ccc;
            text-align: center;
            margin: 0 10px;
            padding:10px 0;
            
        }
        .layer .pro-list-item img:hover {
            /* 参数：translate(x,y)正向右，负值向左 */
            transform:translate(-5px,0px)
        }
        .layer .pro-list-item img {
            width:80%;
            height:80%;
            transition:transform 0.8s ease,width 0.9s linear;
        }

        .layer .pro-list-wrap {
            margin: 100px auto;
            width:960px;
        }

    </style>
</head>
<body>
    <div class='layer'>
        <ul class="pro-list-wrap"> 
            <li class='pro-list-item'>
                <a href='' ><img src='./timg.jpg'></a>
                <h3>张国荣</h3>
            </li>
            <li class='pro-list-item'>
                <a href='' ><img src='./timg.jpg'></a>
                <h3>张国荣</h3>
            </li>
            <li class='pro-list-item'>
                <a href='' ><img src='./timg.jpg'></a>
                <h3>张国荣</h3>
            </li>
            <li class='pro-list-item'>
                <a href='' ><img src='./timg.jpg'></a>
                <h3>张国荣</h3>
            </li>
        </ul>
    </div>
</body>
</html>