首页 > Web开发 > 详细

Use the CSS Transform scale Property to Change the Size of an Element

时间:2019-10-22 21:36:34      阅读:98      评论:0      收藏:0      [点我收藏+]

To change the scale of an element, CSS has the transform property, along with its scale() function.

The following code example doubles the size of all the paragraph elements on the page:

p {
  transform: scale(2);
}

 

练习题目:

Increase the size of the element with the id of ball2 to 1.5 times its original size.

 

练习代码:

 1 <style>
 2   .ball {
 3     width: 40px;
 4     height: 40px;
 5     margin: 50 auto;
 6     position: fixed;
 7     background: linear-gradient(
 8       35deg,
 9       #ccffff,
10       #ffcccc
11     );
12     border-radius: 50%;
13   }
14   #ball1 {
15     left: 20%;
16   }
17   #ball2 {
18     left: 65%;
19 <!-- 仅在此处填空既可,无需写全部代码-->
20     transform: scale(1.5);
21   }
22 </style>
23 
24 <div class="ball" id= "ball1"></div>
25 <div class="ball" id= "ball2"></div>

 

效果:

技术分享图片

 

 

Use the CSS Transform scale Property to Change the Size of an Element

原文:https://www.cnblogs.com/jane-panyiyun/p/11722467.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!