freeCodeCamp/curriculum/challenges/italian/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.md

id, title, challengeType, videoUrl, forumTopicId, dashedName

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78a5367417b2b2512ad9	Usare la proprietà di trasformazione scale per cambiare la dimensione di un elemento	0	https://scrimba.com/c/c2MZVSg	301076	use-the-css-transform-scale-property-to-change-the-size-of-an-element

--description--

Per cambiare la scala di un elemento, CSS ha la proprietà transform, insieme alla sua funzione scale(). Il seguente esempio di codice raddoppia la dimensione di tutti gli elementi paragrafo sulla pagina:

p {
  transform: scale(2);
}

--instructions--

Aumenta la dimensione dell'elemento con l'id di ball2 di 1,5 volte rispetto alla sua dimensione originale.

--hints--

La proprietà transform per #ball2 dovrebbe essere impostata per ingrandirla di 1,5 volte.

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
  )
);

--seed--

--seed-contents--

<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%;

  }


</style>

<div class="ball" id= "ball1"></div>
<div class="ball" id= "ball2"></div>

--solutions--

<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>