Преобразования

Преобразования в CSS добавляют плавность перехода и непрерывность анимации при просмотре веб-страниц. Цель применения преобразования — это просмотр содержания в том плане, чтобы контент плавно появлялся и исчезал, когда пользователь щелкает на ссылку или выполняет соответствующее действие.

Оглавление:
  1. Преобразования и анимации
  2. Преобразование всего контента
  3. От преобразования к анимации
  4. Заключение

Озеро Самарцы - Отдых в Крыму для всей семьи!
Адрес: Крым, Белогорский район, с. Зуя
Тел: +7(978)1176627 http://samartsy.ru/

Преобразования и анимации

Демо

Эти эффекты могут быть реализованы путем преобразования элемента body с использованием анимации CSS. Но, такой вариант преобразования требует учитывать некоторые аспекты, которые полезно обсудить. К ним относятся эффект изменения положения и размер преобразуемого элемента, а также правильное распределение времени переходов, чтобы они хорошо сочетались с анимацией.

К началу

Преобразование всего контента

Преобразования в CSS определяются свойствами для элементов HTML. Например, поворот элемента на 45 градусов по оси Z может выглядеть следующим образом.

#element {
  transform: rotateZ(45deg);
}

Применение преобразования к элементу body работает аналогичным образом.

body {
  transform: rotateZ(45deg);
}

Снимок страницы до и после применения преобразования к элементу body:

Снимок экрана, на котором показано применение преобразования rotateZ(45deg) к элементу документа body
Применение преобразования rotateZ(45deg) к элементу документа body

Для трехмерных преобразований в спецификации применяется свойство perspective, которое можно задать для родительского элемента. При трехмерном преобразовании всего контента, свойства, следует применять к элементу html, потому что этот тег расположен выше в иерархии DOM.

html {
  perspective: 500px;
}

Результат:

Снимок экрана, на котором показано применение преобразования rotateY(45deg) к элементу <body><с perspective: 500px для <html>
Применение преобразования rotate(45deg) к элементу body с свойством perspective: 500px для html

Мы можем управлять свойством transform-origin, и получить интересные результаты.

body {
  transform-origin: 50% 100%;
  transform: rotateX(45deg);
}

Результат:

Снимок экрана, на котором показано применение преобразования: rotateX(45deg) и transform-origin: 50% 100% для <body>
Применение преобразования: rotateX(45deg) и transform-origin: 50% 100% для body
html {
  perspective: 500px;
  perspective-origin: 90% 50%;
}

Результат:

Снимок экрана, на котором показано применение perspective: 500px и perspective-origin: 90% 50% к элементу <html>
Применение perspective: 500px и perspective-origin: 90% 50% к элементу html

как преобразовать элемент body, если размер контента зависит от окна браузера?

Нужно зафиксировать размер элемента body в соответствии с размером окна просмотра и обвернуть контент внутри тега div.

html, body {
  width: 100%;
  height: 100%;
  min-width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

На снимке показано, что происходит, когда страница прокручивается вертикально и мы применяем преобразование rotateY(45deg) к элементу body слева, независимо от размера контента.

Снимок экрана, на котором показано, что происходит при вертикальной прокрутке страницы и применении преобразования rotateY(45deg) к элементу body с проекцией перспективы
Применение преобразования rotateY(45deg) к элементу с проекцией перспективы
К началу

От преобразования к анимации

Разобравшись с хитростями применения преобразований CSS к элементу body, перейдём к анимации. Следуя принципам описанных выше, мы можем создавать плавные анимации, перенося контент в поле зрения или уводить его из поля зрения.

Рассмотрим простое правило @keyframes:

@keyframes rotateInLeft {
  from {
    transform-origin: 0% 0%;
    transform: rotateY(180deg);
  }
  to { 
    transform-origin: 0% 0%; 
    transform: rotateY(0deg);
  }
}

Когда анимация применяется к элементу, например, к элементу body, получается более интересный визуальный эффект. Документ фактически поворачивается как бы приходит из неоткуда в видимую область окна браузера в полноэкранное представление.

Три снимка экрана, последовательно показывающие эффект применения анимации к элементу
Три снимка экрана, последовательно показывающие эффект применения анимации

Аналогичным образом мы можем создавать анимации, плавно удаляющийся контент из поля зрения. Например, сделать чтобы страница исчезала и при этом отдалялась и вращалась.

@keyframes whirlOut {
  to {
    transform: scale(0)rotateZ(1260deg);
  }
}

Результат:

Три снимка экрана, последовательно показывающие эффект применения анимации
Три снимка экрана, последовательно показывающие эффект применения анимации
К началу

Заключение

Первым интуитивно понятным методом добавления анимации к элементу body могло бы быть событие JavaScript onload, но оно добавляет анимации слишком поздно. Событие onload генерируется, когда уже завершилась загрузка всего контента страницы (включая все изображения и другие ресурсы, интенсивно использующие пропускную способность).

Преобразования CSS для элемента body гарантирует, что анимация запустится именно при от рисовки контента, и что начальное положение контента будет соответствовать кадру анимации.