<!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>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
margin:50px auto;
border:2px solid black;
overflow: hidden;
}
.box1:hover img{
/*
对元素进行缩放的函数
scaleX() 水平方向的缩放
scaleY() 垂直方向的缩放
scale() 双方向的缩放
变形的原点设置：
transform-origin:center;
默认值就是center，可以通过这个设置起始点。
*/
transform:scale(1.2);
}
img{
transition:0.2s;
}
</style>
</head>
<body>
<div class="box1">
<img src="./pic/an.jpg" width="100%">
</div>
</body>
</html>
CSS 变形
猜你喜欢
转载自blog.csdn.net/weixin_47401101/article/details/113248905
今日推荐
周排行