Использование свойства 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
Перевод — Дежурка
Смотрите также:
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
549