freeCodeCamp

1.8 KiB

Raw Blame History

id	title	localeTitle	challengeType	videoUrl
587d78a5367417b2b2512ad9	Use the CSS Transform scale Property to Change the Size of an Element	Use la propiedad de escala de transformación CSS para cambiar el tamaño de un elemento	0

Description

Para cambiar la escala de un elemento, CSS tiene la propiedad de transform , junto con su función scale() . El siguiente ejemplo de código duplica el tamaño de todos los elementos de párrafo en la página:

p {
transform:scale(2);
}

Instructions

Aumente el tamaño del elemento con el id de ball2 a 1.5 veces su tamaño original.

Tests

tests:
  - text: &#39;Establezca la propiedad de <code>transform</code> para <code>#ball2</code> para escalarla 1.5 veces su tamaño.&#39;
    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), "Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.");'

Challenge Seed

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

Solution

var code = "#ball2 {left: 65%; transform: scale(1.5);}"

1.8 KiB Raw Blame History