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