Не тратьте время на просмотр этих муторных уроков от автора, чья квалификация сомнительна.
2 любых книжки(HTML + PHP) решат ваши проблемы, какие именно - ищите посты на Хабре.
Информация, получаемая от просмотра видео, толком не усваивается.

Hyper Island

Выше написан возможный вариант. Попробуйте прописать перспективу непосредственно для нужного элемента.

.st-effect-11.st-menu-open .st-pusher {
    perspective(1500px) translate3d(100px, 0, -600px) rotateY(-20deg)
}
.st-effect-11.st-container {}

Еще, для сайдбара лучше всего после анимации обнулять параметры transform. То есть навесить коллбек на событие transitionend, и после обычным margin/left/top назначить для сайдбара необходимую позицию. Соответственно, перед тем как сайдбар прятать, ему нужно вновь вернуть значения transform, затем удалить те смещения которые вы навесили в коллбеке, и только после этого выполнять команду на скрытие. Если будете так делать, то обязательно заверните код в requestAnimationFrame, это нужно для того, чтобы браузер пересчитывал стили именно в той последовательности, в какой нужно вам, иначе стили будут назначаться разом, и будут проявляться странные эффекты(анимация же выполнятся через transition)

let stMenuTransformPrevious, stMenuTransitionPrevious = ''

// after open
requestAnimationFrame(function() { // выполняем действия в новом кадре композиции
  stMenuNode.style.transition = 'none' // убираем transition, так как после мы убираем transform

  requestAnimationFrame(function() { // выполняем в следующем кадре композиции
    stMenuNode.style.transform = 'none'
    stMenuNode.style.left = '0px'
  })
})

// before close
requestAnimationFrame(function() {
  stMenuNode.style.transition = '' // возвращаем transition из css

  requestAnimationFrame(function() { // выполняем в следующем кадре композиции
    stMenuNode.style.left = '' // в зависимости от того, как до этого двигали меню
    stMenuNode.style.transform = '' // применяется transform из css
  })
})

Применительно именно к вашему случаю, stMenuNode.style.left = '0px' назначать не нужно, так как меню и так по умолчанию находится слева.

Причина блюра на тексте в том, что для высокого разрешения просто не хватает аппаратных ресурсов, чтобы картинку рендерить и с ускорением, и в высоком разрешении. Такой же эффект с блюром появляется и на sd-дисплеях. Вообще лучше transform использовать только для анимаций, и, если возможно, после завершения анимации для лучшего рендеринга и разгрузки позиционировать элементы margin/left/top.