Lección 19: Transform
translateX
Mover en el eje horizontal. En positivo mueve a la derecha, en negativo a la izquierda.
.elemento {
transform: translateX(150px);
}
translateY
Mover en el eje vertical. En positivo mueve abajo, en negativo arriba.
.elemento {
transform: translateY(50px);
}
scale
Rescala. Multiplica su tamaño por el número indicado.
.elemento {
transform: scale(2);
}
skewX
Sesgar en el eje X.
.elemento {
transform: skewX(10deg);
}
skewY
Sesgar en el eje Y.
.elemento {
transform: skewY(10deg);
}
rotate
Rotar.
.elemento {
transform: rotate(45deg);
}
Busca en Google: “Do a barrel roll” para ver como usan Rotate.
origin
Punto de origen para las transformaciones. Por defecto es el centro.
.elemento {
transform-origin: top left;
transform: rotate(45deg);
}
Actividad 1
Crea un botón con el texto "casi recto" que al colocar el cursor por encima rote 15 grados.
Actividad 2
Reutilizando el HTML de la actividad 4 de la lección Position para hace que cuando el cursor se posicione encima, se duplique su tamaño.
Actividad 3
Crea un circulo de color rojo y otro, a su lado, de color azul (este último debe tener 0,5 de transparencia). Cuando el cursor se coloque encima del azul, debe moverse a la izquierda hasta que sus colores se mezclen con el primero (podrás observar un color morado).
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.
¿Me ayudas?
No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.
- 1 café: Se mantiene el dominio durante 4 meses.
- 2 cafés: Se liquida 1 mes del Servidor Web.
- 3 cafés: Se paga 1 mes de Newsletter.
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios