2018-09-30 22:01:58 +00:00
---
id: 587d78a5367417b2b2512ad9
title: Use the CSS Transform scale Property to Change the Size of an Element
challengeType: 0
videoUrl: 'https://scrimba.com/c/c2MZVSg'
2019-08-05 16:17:33 +00:00
forumTopicId: 301076
2021-01-13 02:31:00 +00:00
dashedName: use-the-css-transform-scale-property-to-change-the-size-of-an-element
2018-09-30 22:01:58 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
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:
2019-05-14 08:11:58 +00:00
```css
p {
transform: scale(2);
}
```
2020-11-27 18:02:05 +00:00
# --instructions--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
Increase the size of the element with the id of `ball2` to 1.5 times its original size.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --hints--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
The `transform` property for `#ball2` should be set to scale it to 1.5 times its size.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```js
assert(
code.match(
/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi
)
);
2018-09-30 22:01:58 +00:00
```
2020-11-27 18:02:05 +00:00
# --seed--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
## --seed-contents--
2018-09-30 22:01:58 +00:00
```html
< style >
2018-10-08 00:01:53 +00:00
.ball {
2018-09-30 22:01:58 +00:00
width: 40px;
height: 40px;
margin: 50 auto;
position: fixed;
background: linear-gradient(
35deg,
#ccffff ,
#ffcccc
);
border-radius: 50%;
}
#ball1 {
left: 20%;
}
#ball2 {
left: 65%;
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
}
< / style >
< div class = "ball" id = "ball1" > < / div >
< div class = "ball" id = "ball2" > < / div >
```
2020-11-27 18:02:05 +00:00
# --solutions--
2018-09-30 22:01:58 +00:00
2019-04-28 18:13:38 +00:00
```html
< style >
.ball {
width: 40px;
height: 40px;
margin: 50 auto;
position: fixed;
background: linear-gradient(
35deg,
#ccffff ,
#ffcccc
);
border-radius: 50%;
}
#ball1 {
left: 20%;
}
#ball2 {
left: 65%;
transform: scale(1.5);
}
< / style >
< div class = "ball" id = "ball1" > < / div >
< div class = "ball" id = "ball2" > < / div >
2018-09-30 22:01:58 +00:00
```