5.10 (案例) scale
2017-06-08 本文已影响0人
柒月柒日晴7
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个参数 ，分别表示 水平 方向说法 ，垂直方向缩放， >1 表示放大，< 1 表示缩小
2.transform:scale(0.8); 1个参数 表示 水平 垂直一起缩放
3.transform:scaleX(1.2); scaleX 表示 水平方向缩放
4.transform:scaleY(1.2); scaleY 表示 垂直方向缩放
5.transform:scaleX(-0.8); 负数 表示 围绕 Y 轴 垂直轴 翻转 180deg
6.transform:scaleY(-0.8);负数表示 围绕 x轴 水平轴 翻转180deg
*/
}
</style>
</head>
<body>
<div>我不进行缩放</div>
<div>我会缩放</div>
</body>
</html>
