Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Использование свойства CSS перспективы

27 июля 2018 | Опубликовано в css | Нет комментариев »

Для создания трехмерных трансформаций, правильно работающих на веб-сайтах, нужно использование свойства CSS перспективы, с которым у большинства веб-разработчиков в начале знакомства с трехмерными эффектами CSS могут возникать проблемы. Первое и самое важное — свойство перспективы обычно задается элементам внешних блоков, таким как <body>, <figure> и <div>. Это позволит производить трехмерные преобразования над элементами потомков, такими как изображения, находящимися внутри содержащего блока. В этом свойство перспективы похоже на свойства Flexbox, в котором свойство влияет на отображение элементов внутри тегов, к которым оно применяется. Применение трехмерных трансформаций к элементам, которые не наследуют такие свойства от своих родительских элементов, не принесет ожидаемых, да и вообще каких-либо понятных результатов.

Свойству перспективы нужно задавать значение. В настоящее время этому свойству не нужны приставки производителей практически для всех современных версий браузеров.

В книге Pro CSS3 Animation (Профессиональные анимации CSS3), написанной Dudley Storey,  он сравнивает значение свойства перспективы с фокусным расстоянием объектива у зеркального фотоаппарата, — метафора, которую можно расширить следующим образом:

Значение перспективы в пикселях Описание
0 Свойство перспективы не применено: большинство свойств трехмерных трансформаций не будет работать, как ожидается.
1 – 200 Похоже на короткофокусный объектив, также называемый «рыбий глаз», примерно соответствует фокусному расстояние объектива до 18 мм: большинство трехмерных трансформаций будет грубо искажено.
200 – 700 Средние линзы: эффекты проявятся пропорционально.
700+ Телеобъектив, опять же, примерно соответствует более низкому значению, около 180 мм фокусного расстояния настоящего объектива зеркального фотоаппарата:  большинство трехмерных эффектов выглядит более плоскими.

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

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

Применение свойства перспективы

Можно задать свойство перспективы, используя только название этого свойства, или с помощью записи transform-perspective (трансформация перспективы), оба работают одинаково, но первое компактнее:

div#container {
        perspective: 700px;
}

Заключение

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:




Оставить ответ


9 − шесть =

Вставить изображение