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); }
Exercise Title:
Increase the size of the element with the id of ball2
to 1.5 times its original size.
Practice Code:
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 is left: 65 % ; . 19 <- - here can only fill in the blank, without having to write all code!> 20 is Transform: Scale ( for 1.5 ); 21 is } 22 is </ style> 23 is 24 <div class = " Ball " ID = " ball1 " > </ div> 25 <div class = " Ball " ID = " ball2 " > </ div>
effect: