Перспектива в css.

Оцените материал
(0 голосов)

Здравствуйте! В этой статье я расскажу о таком свойтсве  CSS как перспектива. В контексте двумерного мира перспектива дает пользователям иллюзию глубины объекта, ширины, высоты и позиции относительно другого объекта, если смотреть на объект с определенной точки зрения. Перспектива позволяет художникам создавать пейзажи, глядя на которые создается впечатление, что они уходят «внутрь» холста, или рисовать на улице здания разных размеров, которые «уходят» от нашего взгляда. На двумерной плоскости у объектов также есть точка схода, в которой «растворяется» глубина объекта. Давайте проиллюстрируем это на простой диаграмме:

На данной диаграмме показаны три объекта (прямоугольники) на двумерной плоскости. Когда прямоугольники перемещаются по плоскости, то линии перспективы (лучи) могут быть проведены к точке схода, и тогда мы получим трехмерные объекты. А поскольку Веб отображается на двумерных поверхностях (т.е. экранах устройств), то перспектива может помочь нам создать похожую глубину. В мире Веба и CSS3 трансформаций, перспектива может быть определена следующим образом (определение с сайта MDN):

CSS свойство perspective определяет расстояние между плоскостью z = 0 и пользователем, чтобы дать 3D-позиционированному элементу некоторую перспективу. Каждый 3D-элемент с z > 0, становится больше, а каждый 3D-элемент с z < 0 — меньше. Сила эффекта определяется значением данного свойства.

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

 

Базовая перспектива

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

свойство perspective не задано

свойство perspective со значением 100px

свойство perspective со значением 200px

свойство perspective-origin в значении [0, 0]

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

<div class="perspective-container perspective--none">
<span class="surface square">
square
</span>
</div>
<div class="perspective-container perspective--200">
<span class="surface square">
square
</span>
</div>
<div class="perspective-container perspective--100 perspective-origin--00">
<span class="surface square">
square
</span>
</div>

Давайте теперь применим необходимые CSS свойства перспективы:

.perspective-container {
background-color: #eee;
}
.perspective--none {
/**/
}
.perspective--100 {
perspective: 100px;
}
.perspective--200 {
  perspective: 200px;
}
.perspective-origin--00 {
perspective-origin: 0 0;
}
.surface {
display: block;
text-align: center;
width: 100%;
height: 100%;
color: #fff;
background-color: rgb(55,124,255);
font-size: 18px;
line-height: 200px;
}

Если мы обновим нашу страницу в браузере, то увидим три одинаковых квадрата. Почему? Потому что ни один из наших трех объектов не был в действительности перемещен на плоскости. Чтобы увидеть, как свойства перспективы влияют на наши объекты, давайте переместим их на плоскости по оси Z, используя свойство transform. Мы добавим следующий CSS к нашему классу .surface, который управляет представлением наших объектов:

.surface {
transform: translateZ(-50px);
}

Просмотреть  пример

Теперь мы можем увидеть три разных результата:

Первый объект остался неизменным, потому что без указания каких-либо правил для перспективы перемещение по оси Z (т.е. в и из экрана) не даст никаких изменений в плане глубины.

Второй объект немного переместился внутрь экрана, поскольку мы указали свойство perspective равное 200px. Помните, что, по определению, свойства перспективы устанавливают расстояние между плоскостью z=0 и пользователем.

Третий объект кажется еще меньше. Он переместился в верхний левый угол родительского контейнера. Это произошло потому, что мы установили свойство perspective-origin именно для родительского контейнера.

Вращение фигур в перспективе

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

На этот раз у нас есть те же три квадрата, но мы будем вращать их по оси Y, чтобы они поворачивались «внутрь» экрана. Мы будем использовать CSS эффект перехода вместе с псевдо-классом :hover, чтобы анимировать то, как свойства перспективы влияют на вращение. Вот разметка:

<div class="perspective-container perspective--none">
<span class="surface-2">
square
</span>
</div>
<div class="perspective-container perspective--400">
<span class="surface-2">
square
</span>
</div>
<div class="perspective-container perspective--400 perspective-origin--00">
<span class="surface-2">
square
</span>
</div>

На этот раз я добавил вспомогательный класс со значением 400px:

.perspective--400 {
perspective: 400px;
}

Наконец, давайте посмотрим на CSS для нашей новой фигуры, который прописан в классе surface-2:

.surface-2 { 
display: block; 
text-align: center; 
width: 100%; 
height: 100%; 
color: #fff; 
background-color: rgb(55,124,255); 
font-size: 24px; 
line-height: 200px; 
transition: transform 1s; 
} 
.surface-2:hover { 
transform: rotateY(180deg); 
}

Просмотреть  пример

 При наведении мы получаем три разных результата:

Без указания перспективы первый объект вращается по оси Z в очень плоской манере. Непохоже, чтобы что-то выходило во внутрь или наружу экрана.

Когда мы устанавливаем перспективу со значением 400px, мы уже видим, что второй объект вращается, «заглядывая» и «выглядывая» из экрана. А все благодаря перспективе.

А установив для третьего объекта перспективу со значением 400px и исходное положение со значением [0,0] мы достигаем похожего эффекта (как и со вторым объектом), но только уже отталкиваясь от исходного положения.

 

Прочитано 758 раз Последнее изменение Суббота, 05 ноября 2016 14:28
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+