这篇文章介绍了如何在HTML和CSS中使用transform属性，特别是scale函数实现元素在鼠标悬停时的缩放效果，包括不同缩放比例和中心点的选择。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transform-origin: left bottom;
}
div:hover {
/* 里面的数字不跟单位 1就倍 2就是2倍*/
/* transform: scale(x,y); */
/* transform: scale(2, 2); */
/* 修改宽度为原来的2倍 高度不变 */
/* transform: scale(2, 1); */
/* 等比例缩放 同时修改宽度和高度 */
/* transform: scale(2); */
/* 可以进行缩小 小于1 就是缩放 */
/* transform: scale(0.5, 0.5); */
/* scale的优势之处 :不会影响其他盒子 而且可以设置缩放的中心点*/
/* width: 300px;
height: 300px; */
transform: scale(2);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
扫一扫
1601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
