Skip to content
Modern CSS Fundamentals

Transforms & Opacity

As I mentioned in the previous lesson, transforms and opacity are hardware accelerated, meaning we can do animations and transitions on them without worrying too much about performance.

Opacity

Section titled “Opacity”

We’ve already looked at the alpha value of colors, which allows us to reduce the opacity of a color value, but we can also reduce the opacity of entire elements using the opacity property, which accepts values between 0 and 1.

See the Pen opacity by Kevin (@kevinpowell) on CodePen.

In general, this is most useful when working with animations, which we’ll be seeing in the next lesson.

Transforms

Section titled “Transforms”

We have 4 types of transforms that we can do:

  • scale elements up and down
  • rotate elements
  • translate (move) element around
  • skew elements

See the Pen transforms by Kevin (@kevinpowell) on CodePen.

Originally, we had to use the transform property:

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


.move-right {
  transform: translate(30px);
}


.get-bigger {
  transform: scale(1.2);
}


.skew {
  transform: skew(10deg);
}

If you want to do multiple transforms, you just list them all out:

.get-bigger-and-turn {
  transform: scale(1.5) rotate(90deg);
}

Now, other than for skew(), we have individual properties that we can use as well.

.rotate {
  rotate: 45deg;
}


.move-right {
  translate: 30px;
}


.get-bigger {
  scale: 1.2;
}