2D转换之缩放 transform:scale()(笔记)

&Mark&

已于 2022-02-14 10:04:21 修改

阅读量968

点赞数

分类专栏： html 文章标签： css html css3

于 2022-02-14 09:54:59 首次发布

本文链接：https://blog.csdn.net/qq_64970126/article/details/122918368

版权

html 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

4.5 2D转换之缩放scale
缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。
缩放
1.语法
transform : scale(x,y);
2.注意
注意其中的x和y用逗号分隔
transform:scale(1,1)︰宽和高都放大一倍，相对于没有放大transform:scale(2,2)︰宽和高都放大了2倍
transform:scale(2):只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)transform:scale(0.5,0.5):缩小
sacle缩放最大的优势∶可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

    <style>
        div{
            width: 230px;
            height: 160px;
            border: 1px solid red;
            margin: 100px auto;
            text-align: center;
            /* overflow: hidden; */
        }
       img{
         transition: all 6s;
       }
       img:hover{
           transform: scale(5);
       }
    </style>
</head>
<body>
    <div>
        <img src="images/pro_07.jpg" alt="">
    </div>
   
</body>
</html>

&Mark&

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2D转换之缩放 transform:scale()(笔记)

4.5 2D转换之缩放scale缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。缩放1.语法transform : scale(x,y);2.注意注意其中的x和y用逗号分隔transform:scale(1,1)︰宽和高都放大一倍，相对于没有放大transform:scale(2,2)︰宽和高都放大了2倍transform:scale(2):只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)transform:scale(0.5,0.5).
复制链接

扫一扫