# CSS Transforms

• Transforms can be used in combination with transitions so that the value of the transform changes over a period of time.
• There are 2D and 3D transforms. Most of what we do will be using the 2D Transforms
• Multiple values can be applied to a transform by leaving a space between each.

.box {
  transform: rotate(30deg);
}
.box:hover {
  transform: rotate(60deg);
}
.thing {
  transform: translateX(200px) translateY(-50px) scale(2);
}
.thing:hover {
  transform: translateX(100px) translateY(0px) scale(1);
}

• If you want to use transforms in combination with transitions then you must make sure that all the values used in the transition are also used in the default values.
• In the example above, the transform change would take place instantaneously.