Igor Z.

Возможно, что это происходит из-за изменения размеров. Попробуйте менять размер через scale:

img {
  width: 300px;
  height: 300px;
  position: absolute;
  transform: rotate(-45deg) scale(0.5);
  box-shadow: 0 0 0 4px white;
}
img:hover {
  z-index: 10;
  transform: rotate(0deg) scale(1);
  transition: 2s;
}

Вообще они могут дергаться из за того что во время анимации у них промежуточное состояние со своими значениями, а по завершении - финальное, и значения параметров на конец анимации могут на 0.000х отличаться, и последним действием идет "подгон" промежуточного до финального значения. Должно помочь небольшая корректировка времени.

Это скорее всего какой-то элемент растягивается на такую ширину, а остальные омещаются под разммер экрана, поэтому у вас справа такой белый фон. Обычно бывает из-за тега p.