CSS - Lesson 21: Transform | Andros Fenollosa

translateX

Move on the horizontal axis. When positive it moves to the right, when negative to the left.

.elemento {
  transform: translateX(150px);
}

translateY

Move on the vertical axis. When positive it moves down, when negative up.

.elemento {
  transform: translateY(50px);
}

scale

Rescale. Multiplies its size by the indicated number.

.elemento {
  transform: scale(2);
}

skewX

Skew on the X axis.

.elemento {
  transform: skewX(10deg);
}

skewY

Skew on the Y axis.

.elemento {
  transform: skewY(10deg);
}

rotate

Rotate.

.elemento {
  transform: rotate(45deg);
}

Search on Google: "Do a barrel roll" to see how they use Rotate.

More information

origin

Point of origin for the transformations. By default it is the center.

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

More information

Activity 1

Create a button with the text "almost straight" that, when the cursor is placed over it, rotates 15 degrees.

Activity 2

Create a modal that, when the cursor is placed over it, doubles its size.

Activity 3

Create a red circle and another one, next to it, in blue (this last one must have 0.5 transparency). When the cursor is placed over the blue one, it must move to the left until its colors mix with the first one (you will be able to see a purple color).