CSS Transitions and Transforms

Transforms

transform lets you modify the visual appearance (coordinate space) of css elements. Elements can be translated, rotated, scaled, and skewed

Examples

Scale (resizes elements)

Scale the .box by increasing it 20 times it’s original size. Value is in percentage

.box {
  width: 20px;
  height: 20px;
  transform: scale(20);
}

Translate (moves elements)

Skew

Rotate

center an element

/* center the element */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);