当前位置: 代码迷 >> 综合 >> 2D转换之缩放 transform:scale()(笔记)
  详细解决方案

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

热度:30   发布时间:2023-12-06 15:37:12.0

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>

  相关解决方案