版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sakenc/article/details/87912711
scale()缩放：scale()函数让元素根据中心原点对对象进行缩放。
缩放 scale 具有三种情况：
1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。
2、scaleX(x)元素仅水平方向缩放（X轴缩放）
3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）
用法：
①transform:scale(0.8);//缩小到原来的0.8倍
②transform:scale(1.2);//放大到原来的1.2倍
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>变形--缩放 scale()</title>
<link href="css/sytle.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="wrapper">
<div><span>放大1.2倍</span></div>
</div>
</body>
</html>
css
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
.wrapper {
height: 200px;
width: 300px;
margin: 100px auto;
border: 2px dotted #00F;
}
.wrapper div {
height: 150px;
width: 200px;
line-height: 150px;
margin: 25px auto;
text-align: center;
font-size: 20px;
color: #fff;
background: #C09;
}
.wrapper div:hover{
transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
}
/*.wrapper div:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
/*transform:scaleX(1.2);
transform:scaleY(1.2);*/