css案例_图片触摸缩放

isHuPei

已于 2022-06-24 21:42:06 修改

阅读量392

点赞数

分类专栏：前端文章标签： css css3 前端

于 2022-06-24 21:39:22 首次发布

本文链接：https://blog.csdn.net/hu4545/article/details/125452581

版权

前端专栏收录该内容

8 篇文章 2 订阅

订阅专栏

css案例_图片触摸缩放

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

语法 transform : scale(x,y);

transform:scale(1,1)：宽和高都放大一倍，相对于没有放大。
transform:scale(2,2)：宽和高都放大了2倍。
transform:scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)。
transform:scale(0.5,0.5)：缩小。
sacle 缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子。

样式：
在这里插入图片描述
html部分：

<body>
    <div><a href="#"><img src="images/promo.png" alt=""></a></div>
</body>

css部分：

 div {
     width: 520px;
     height: 280px;
     margin: 20px 30px;
     /*关键点：scale会使得图片撑大盒子，所以需要加上超出隐藏 */
     overflow: hidden;
 }

 div img {
     transition: all .4s;
 }

 div:hover img {
     transform: scale(1.1);
 }