JQ+CSS3 实现卡片上图片的旋转和放大效果#一、效果图#二、代码

#一、效果图
#二、代码
<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <title>卡片</title>
    <style>
        .card {
            width: 395px;
            height: 510px;
            background-color:#e0ebed;
            overflow: hidden;
           
        }
        .img{
            width: 395px;
            height: 220px;
            overflow: hidden;
        }
        img.bigger {
            width: 100%;
            height: 100%;
            transition: transform 2s;
        }

        img:hover {
            transform: scale(1.2, 1.2);
        }
        .content strong{
            font-size: 20px;
        }
        .content{
            padding: 5px 10px;
            margin: 30px 10px;
            color: #585858;
        }
        .content span{
            color: rgb(22,196,175);
        }
    </style>
</head>

<body>
    <div class="card">
        <div class="img">
            <img class="bigger" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=375874604,2583473491&fm=26&gp=0.jpg" alt="">
        </div>
       <div class="content">
            <strong>智慧停车整体解决方案</strong>
            <p style="margin-bottom: 40px;">围绕“人、车、场、服务”的数据积累，结合IOT的先进采集技术，采用互联网+大数据的方式，挖掘智慧停车的市场潜力，使智慧停车成为智慧城市、智慧交通的重要一环...</p>
            <svg t="1585122467933" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5894" width="32" height="32"><path d="M512 909.061224c-218.906122 0-397.061224-178.155102-397.061224-397.061224s178.155102-397.061224 397.061224-397.061224 397.061224 178.155102 397.061224 397.061224-178.155102 397.061224-397.061224 397.061224z" fill="#16C4AF" p-id="5895"></path><path d="M660.897959 531.853061h-297.795918c-10.971429 0-19.853061-8.881633-19.853061-19.853061s8.881633-19.853061 19.853061-19.853061h297.795918c10.971429 0 19.853061 8.881633 19.853061 19.853061s-8.881633 19.853061-19.853061 19.853061z" fill="#DCFFFA" p-id="5896"></path><path d="M512 680.75102c-10.971429 0-19.853061-8.881633-19.853061-19.853061v-297.795918c0-10.971429 8.881633-19.853061 19.853061-19.853061s19.853061 8.881633 19.853061 19.853061v297.795918c0 10.971429-8.881633 19.853061-19.853061 19.853061z" fill="#DCFFFA" p-id="5897"></path></svg>
            <span style="margin-left: 10px;margin-top: -5px;display: inline-block;vertical-align: text-top;">LEARM MORE</span>
        </div>
    </div>
    <script>
        $(function (param) { 
            $('.card').mouseover(function (param) { 
                $(this).find('.bigger').css({'transform':'scale(1.2, 1.2)',"transition-duration":'2s'});
                $(this).find('svg').css({'transform':'rotate(180deg)',"-webkit-transform":'rotate(180deg)','transition':'transform .5s'});
             });
             $('.card').mouseout(function (param) { 
                $(this).find('.bigger').css({'transform':'scale(1.0, 1.0)',"transition-duration":'2s'});
                $(this).find('svg').css({'transform':'rotate(0deg)',"-webkit-transform":'rotate(0deg)','transition':'transform .5s'});
             })
         })
    </script>
</body>
</html>