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
2018-09-30 22:01:58 +00:00
---
## Description
< section id = 'description' >
To change the scale of an element, CSS has the < code > transform< / code > property, along with its < code > scale()< / code > 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);
}
```
2018-09-30 22:01:58 +00:00
< / section >
## Instructions
< section id = 'instructions' >
Increase the size of the element with the id of < code > ball2< / code > to 1.5 times its original size.
< / section >
## Tests
< section id = 'tests' >
```yml
2018-10-04 13:37:37 +00:00
tests:
2018-10-20 18:02:47 +00:00
- text: Set the < code > transform</ code > property for < code > #ball2</ code > to scale it 1.5 times its size.
2019-07-24 09:42:26 +00:00
testString: 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
```
< / section >
## Challenge Seed
< section id = 'challengeSeed' >
< div id = 'html-seed' >
```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 >
```
< / div >
< / section >
## Solution
< section id = 'solution' >
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
```
< / section >