Трансформации

Существует несколько базовых трансформаций:

• rotate(45deg)  позволяет вращать элемент.
• scale(2)  масштабирует элемент. Может принимать два параметра, позволяя растягивать элемент или даже отражать его.
• skew(10deg, 10deg)  наклоняет элемент в одной или двух плоскостях.
• translate(10px, 20px)  сдвигает элемент по одной или двум осям.
• matrix(...)  трансформирует элемент согласно   матрице преобразований

Есть и другие виды трансформаций. О них рекомендую почитать здесь:   MDN: CSS Transforms

Вы можете комбинировать несколько трансформаций. К примеру, можно одновременно сдвинуть и повернуть элемент. ВАЖНО: порядок трансформаций играет роль.

.figure {
  font-size: 12px;
  width: 50px;
  height: 50px;
  background: var(--accent);
  color: var(--white-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 100px;
  top: 20px;
}

.border {
  border: 1px dashed var(--grey);
  background: transparent;
}

<div class="figure border"></div>
<div class="figure transform">ABCD</div>

.transform {
  transform: translate(0px, 100px) rotate(45deg);
}

.transform {
  transform: rotate(45deg) translate(0px, 100px);
}

Обратите внимание, что в первом случае фигура была сначала сдвинута на 100px вниз, а затем повёрнута на 45 градусов, а во втором случае — сначала повёрнута на 45 градусов, а затем сдвинута вниз (относительно своего текущего положения в пространстве; то есть "низом" считается низ самой фигуры).