CSS3中使用scale() 方法实现元素尺寸的增加或减少功能

最新推荐文章于 2024-04-20 14:10:04 发布

南京闫伟亮的野爹

最新推荐文章于 2024-04-20 14:10:04 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： CSS

原文链接：https://www.mk2048.com/blog/blog.php?id=j1jh2kb1j&title=CSS3%E4%B8%AD%E4%BD%BF%E7%94%A8scale%28%29+%E6%96%B9%E6%B3%95%E5%AE%9E%E7%8E%B0%E5%85%83%E7%B4%A0%E5%B0%BA%E5%AF%B8%E7%9A%84%E5%A2%9E%E5%8A%A0%E6%88%96%E5%87%8F%E5%B0%91%E5%8A%9F%E8%83%BD

版权

前端专栏收录该内容

368 篇文章 3 订阅

订阅专栏

scale() 方法

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

实例

div
{
transform: scale(2,4);
-ms-transform: scale(2,4);	/* IE 9 */
-webkit-transform: scale(2,4);	/* Safari 和 Chrome */
-o-transform: scale(2,4);	/* Opera */
-moz-transform: scale(2,4);	/* Firefox */
}

值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

完整实例：

 
       <!DOCTYPE html> 
      
       <html> 
      
       <head> 
      
       <style>  
      
       div 
      
       { 
      
       width 
       : 
       100px 
       ; 
      
       height 
       : 
       75px 
       ; 
      
       background-color 
       :yellow; 
      
       border 
       : 
       1px  
       solid  
       black 
       ; 
      
       } 
      
       div#div 
       2 
      
       { 
      
       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>

南京闫伟亮的野爹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3中使用scale() 方法实现元素尺寸的增加或减少功能

scale() 方法通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：实例 div{transform: scale(2,4);-m...
复制链接

扫一扫