通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
margin:100px;
transform:scale(2,4);
-ms-transform:scale(2,4); /* IE 9 */
-moz-transform:scale(2,4); /* Firefox */
-webkit-transform:scale(2,4); /* Safari and Chrome */
-o-transform:scale(2,4); /* Opera */
}
</style>
</head>
<body>
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>
</body>
</html>
值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。
<view class='c01'>
01
</view>
<view class='c02'>
02
</view>
<view class='c03'>
03
</view>
.c01{
width:100px;
height:150px;
margin: 50px;
background-color: gainsboro;
}
.c02{
width:50px;
height:50px;
margin: 50px;
background-color: gainsboro;
}
.c03{
width:50px;
height:50px;
margin: 50px;
background-color: gainsboro;
transform: scale(2,2); /* 标准语法 */
}