freeCodeCamp

1.9 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78a5367417b2b2512ada	Use the CSS Transform scale Property to Scale an Element on Hover	0		Use la propiedad de escala de transformación CSS para escalar un elemento al pasar el cursor

Description

La propiedad de transform tiene una variedad de funciones que le permiten escalar, mover, rotar, sesgar, etc., sus elementos. Cuando se usa con pseudoclases como :hover el :hover que especifican un determinado estado de un elemento, la propiedad de transform puede agregar fácilmente interactividad a sus elementos. Aquí hay un ejemplo para escalar los elementos del párrafo a 2.1 veces su tamaño original cuando un usuario se desplaza sobre ellos:

p: hover {
transformar: escala (2.1);
}

Instructions

Añadir una regla CSS para el hover estado del div y utilizar el transform la propiedad para escalar la div elemento a 1,1 veces su tamaño original cuando un usuario se desplaza sobre él.

Tests

tests:
  - text: El tamaño del elemento <code>div</code> debe escalar 1.1 veces cuando el usuario se desplaza sobre él.
    testString: 'assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi), "The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.");'

Challenge Seed

<style>
  div {
    width: 70%;
    height: 100px;
    margin:  50px auto;
    background: linear-gradient(
      53deg,
      #ccfffc,
      #ffcccf
    );
  }



</style>

<div></div>

Solution

// solution required

1.9 KiB Raw Blame History