微信小程序界面设计小程序中CSS3样式精通课程-2D转化-scale()增加或者减少元素大小
2D转化-scale()增加或者减少元素大小
通用语法
通过 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 倍。
效果图
防采集标记：黄菊华老师的课程和资料
小程序应用
Wxml代码
<view class='c01'>
01
</view>
<view class='c02'>
02
</view>
<view class='c03'>
03
</view>
Wxss代码
.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); /* 标准语法 */
}
效果图
欢迎大家学习我的视频课程：微信小程序界面设计-小程序中CSS3样式精通课程
https://edu.****.net/course/detail/12851