Lección 20: 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.

Más información

origin

Punto de origen para las transformaciones. Por defecto es el centro.

.elemento {
  transform-origin: top left;
  transform: rotate(45deg);
}

Más información

Actividad 1

Crea un botón con el texto "casi recto" que al colocar el cursor por encima rote 15 grados.

Actividad 2

Crea un modal 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.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

Comprame un café — Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}

Escribe el primer comentario