Instagram | Twitter | LinkedIn
Which of the following code snippets you would use to move an element 200 pixels from the left and 50 pixels from the top: A, B or C ?
Click here to see the correct answer and explanation 👀
| Correct Answer | Explanation |
|---|---|
| B | The translate value moves an element left/right and up/down. The movement is based on the parameters given for the X (horizontal) Y (vertical) axes. A positive X value moves the element to the right, while a negative X moves the element to the left. A positive Y value moves the element downwards and a negative Y value, upwards. |
Explanation based on 👉🏼 CSS Transitions and Transforms for Beginners | thoghtbot
Code:
HTML:
<div></div>
CSS:
div {
background: url(https://media.giphy.com/media/eefpGtchdwE4U/giphy.gif);
background-size: cover;
width: 100px;
height: 100px;
transform: translate(200px, 50px);
}
¿Cuál de los siguientes fragmentos de código usarías para mover un elemento 200px hacia la derecha y 50px hacia abajo: A, B o C?
Haz click aquí para ver la respuesta correcta y su explicación 👀
| Respuesta correcta | Explicación |
|---|---|
| B | El valor translate mueve un elemento hacia la izquierda/derecha y hacia arriba/abajo. El movimiento se basa en los parámetros dados por los ejes X (horizontal) y Y (vertical). Un valor X positivo mueve el elemento hacia la derecha, mientras que una X negativa mueve el elemento hacia la izquierda. Un valor Y positivo mueve el elemento hacia abajo y un valor Y negativo, hacia arriba. |
Explicación basada en 👉🏼 CSS Transitions and Transforms for Beginners | thoghtbot
Código completo:
HTML:
<div></div>
CSS:
div {
background: url(https://media.giphy.com/media/eefpGtchdwE4U/giphy.gif);
background-size: cover;
width: 100px;
height: 100px;
transform: translate(200px, 50px);
}