前端css动画缩放transform: scale()

叶不休

于 2024-08-18 20:44:12 发布

阅读量406

点赞数 3

分类专栏：前端文章标签：前端 css css3 html javascript html5 chrome

本文链接：https://blog.csdn.net/weixin_58694594/article/details/141291913

版权

前端专栏收录该内容

106 篇文章 1 订阅

订阅专栏

transform: scale(2)

scale等比例放大

大于1是放大

小于1是缩小

负值是倒着放大

scaleX scaleY 可以单独设置只在x轴y轴放大

改变中心点放大的位置

左上 left top

左下 left bottom

左中 left center

右上 right top

右下 right bottom

右中 right center

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            /* height: 300px; */
            border: 5px solid red;
            margin: 100px auto;
            overflow: hidden;
        }
        img{
            width: 100%;
            transition: all 2s;
            transform-origin: right top;
            /* 改变中心点放大的位置
            left top            
            left bottom
            left center
            right top            
            right bottom
            right center

            */
        }
        div:hover img{
            transform: scale(2);
            /*
            scale等比例放大
            大于1是放大
            小于1是缩小 
            负值是倒着放大 
            
            scaleX        scaleY可以单独设置只在x轴y轴放大
            */
        }
    </style>
</head>
<body>
    <div>
        <img src="/image/dog.jpg" alt="">
    </div>
</body>
</html>

鼠标放上去就可以缩小放大了