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>
效果:

轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/116165.html
標籤:Html/Css
上一篇:FCC---Create Texture by Adding a Subtle Pattern as a Background Image
下一篇:FCC---Use the CSS Transform scale Property to Scale an Element on Hover
