用transform:scale();缩放
程序员文章站
2022-06-27 14:21:45
...
当鼠标划过的时候缩放：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缩放</title>
<style>
.box{
width: 200px;
height: 200px;
margin:200px auto;
}
.box:hover{
transform: scale(1.5);
}
.blue:hover{
transform:scale(2);}
.blue{
background:url(1.jpg) center center / cover no-repeat;
position: relative;
}
.yellow{
background-color:yellow;
position: absolute;
right:300px;
top: 0px;
}
.green{
background-color:green;
position: absolute;
left: 300px;
top: 0px;
}
</style>
</head>
<body>
<div class="box blue"></div>
<div class="box green"></div>
<div class="box yellow"></div>
</body>
</html>
效果展示：
上一篇： Css变形-缩放scale
下一篇： Android旋转动画
推荐阅读
-
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
-
illustrator视图缩放怎么用?AI缩放工具的快捷键
-
CSS3中的变形处理——transform功能（旋转、缩放、倾斜、移动）
-
2D变形CSS3 transform---移动 translate(x, y), 缩放 scale(x, y), 旋转 rotate(deg), transform-origin, 倾斜 skew(deg, deg)
-
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
-
CSS3旋转缩放移动倾斜等效果——transform
-
使用js从element的matrix推导transform的scale、rotate 和 translate参数
-
android 动画之基础动画 alpha(渐变) scale(缩放) translate(移动) rotate(旋转)
-
Css变形-缩放scale
-
用transform:scale();缩放