scale.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scale</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background: -webkit-linear-gradient(red 30%,yellow 100%);
margin: 10px;
text-align: center;
line-height: 200px;
font-size: 20px;
}
div:nth-child(2){
transform:scale(-0.8);
/*transform:scaleY(-0.8);*/
/*
1.transform:scale(0.8,0.5); 2個(gè)參數(shù) ，分別表示 水平 方向說(shuō)法 ，垂直方向縮放， >1 表示放大，< 1 表示縮小
2.transform:scale(0.8); 1個(gè)參數(shù) 表示 水平 垂直一起縮放
3.transform:scaleX(1.2); scaleX 表示 水平方向縮放
4.transform:scaleY(1.2); scaleY 表示 垂直方向縮放
5.transform:scaleX(-0.8); 負(fù)數(shù) 表示 圍繞 Y 軸 垂直軸 翻轉(zhuǎn) 180deg
6.transform:scaleY(-0.8);負(fù)數(shù)表示 圍繞 x軸 水平軸 翻轉(zhuǎn)180deg
*/
}
</style>
</head>
<body>
<div>我不進(jìn)行縮放</div>
<div>我會(huì)縮放</div>
</body>
</html>
