微信小程序界面设计小程序中CSS3样式精通课程-2D转化-scale()增加或者减少元素大小

心已赠人 2024-02-19 16:18 14阅读 0赞

### 2D转化-scale()增加或者减少元素大小 ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]  
通用语法  
通过 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 倍。  
效果图  
![微信小程序界面设计小程序中CSS3样式精通课程-2D转化-scale()增加或者减少元素大小][CSS3_-2D_-scale]  
防采集标记：黄菊华老师的课程和资料

### 小程序应用 ###

> Wxml代码

> 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样式精通课程-2D转化-scale()增加或者减少元素大小][CSS3_-2D_-scale 1]  
[欢迎大家学习我的视频课程：微信小程序界面设计-小程序中CSS3样式精通课程][-_CSS3]

![微信小程序界面设计小程序中CSS3样式精通课程-2D转化-scale()增加或者减少元素大小][CSS3_-2D_-scale 2]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[CSS3_-2D_-scale]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/85804fe100c14b9ba59cd03d194dbe68.png
[CSS3_-2D_-scale 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/55b3b6ad813b4e3c85c81c76c9ccbb68.png
[-_CSS3]: https://ke.qq.com/course/371155?tuin=2b10d56
[CSS3_-2D_-scale 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/acee45fc824f4034b422afa7846abc78.png