perspective() в CSS

Содержание

Про CSS

Transform

Css transform позволяет трансформировать элементы, в том числе в трехмерном пространстве.

Используя свойство transform можно задавать элементу одну и более функций для трансформации. Все функции можно найти тут: Transform Functions

Возможные значения: none или функции трансформаций через пробел.

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

дадут совершенно разный результат, а строчка:

повернет объект на 90 градусов, потому что обе функции будут выполнены последовательно.

Transform-origin

Свойство определяет центр трансформации.

Возможные значения: расстояния в пикселях или процентах или ключевые слова ( left , center , right , top , bottom ).

Исходное значение: 50% 50% — центр элемента.

Координаты отсчитываются от верхнего левого угла элемента. Если задано только одно значение, второе принимает значение center . Если задано два значения, третье принимает значение 0.

Transform-style

Определяет поддержку 3D внутри трансформируемого элемента.

flat — трансформируемый элемент плоский preserve-3d — трансформируемый элемент имеет внутренний объем

Следующие свойства могут перекрывать действие transform-style: preserve-3d; и делать отображение элемента плоским независимо от значения transform-style :

overflow с любым значением кроме visible opacity с любым значением кроме 1 (блокирует трехмерность, если задан обертке трансформируемого объекта, то есть уровнем выше, чем transform-style: preserve-3d; . На одном уровне они не мешают друг другу) так было на момент написания статьи, сейчас прозрачность делает трёхмерный элемент плоским. filter с любым значением кроме none

Perspective

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

Возможные значения: none или длина в пикселях.

Perspective-origin

Отвечает за расположение точки, от которой отсчитывается перспектива. По сути, задается положение зрителя относительно сцены.

Возможные значения: расстояния в пикселях или процентах или ключевые слова ( left , center , right , top , bottom ).

Backface-visibility

Определяет видимость задней стороны объекта.

Возможные значения: visible — объект виден всегда, вне зависимости от того, какой стороной повернут (значение по умолчанию). hidden — скрывать объект, если он повернут «спиной».

Свойство perspective

Свойство perspective применяется при трансформациях элемента, определяет расстояние в пикселях от плоскости дочерних элементов до точки из которой пользователь как бы смотрит на них.

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

Допустимые значения

  • none — дочерние элементы находятся в плоскости родительского элемента
  • — расстояние в пикселях от точки, из которой как бы смотрит пользователь, до плоскости, в которой будут находиться дочерние элементы.
Значение по умолчанию none
Применимо к блочным и строчным элементам
Наследование нет
Версия CSS CSS 3
Поддерживается браузерами

Пример

Твой код:
Результат:

Заметки

Safаri 5 и выше поддерживает аналогичное свойство -webkit-perspective

Также для Safаri 5 и выше есть возможность применить свойство -webkit-transform со значением функции perspective. Отличие в том, что функция perspective применяется к элементу непосредственно, а свойство perspective применяется только к дочерним элементам.

Как создать впечатляющую 3D графику в CSS3

Эта статья показывает, как использовать преобразования для создания и анимирования 3D объектов, используя только CSS .

CSS 3D преобразования быстро становятся признанным способом добавления глубины и интерактивности в веб-проекты.

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

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

Зачем использовать CSS?

Есть огромное количество способов создать 3D графику в HTML. На основе JS , Canvas, SVG , доступны даже решения на основе WebGL , и все они имеют свои достоинства, но есть еще и CSS .

Решение на базе CSS обходится без изображений и способно использовать графический процессор для ускорения обработки графики.

При этом не требуются плагины, и CSS может жить вне стен canvas на вашей странице:

Установка свойства perspective может произвести впечатляющий эффект

CSS 3D графика не так оптимизирована как WebGL . Отдельной темой является несовместимые браузеры. Тем не менее, включение 3D объектов в веб-проекты открывает новые направления работы, и может быть использовано уже сегодня.

Не все браузеры полностью поддерживают 3D преобразования, которые использованы в этой статье, поэтому для краткости я буду использовать префикс -webkit .

Не забудьте включить префиксы для Mozilla , Opera , MS , а также версии без префиксов в случае необходимости. Полные версии кода CSS (с префиксами) находятся в файлах проекта .

Основы: создание 3D куба

Для начала мы построим базовый 3D куб, разместив и анимировав его в 3D пространстве. Сначала напишем код HTML, который будет представлять части 3D куба:

Я задействовал элемент figure , но можно было использовать div , span или любой другой тип элемента на ваше усмотрение.

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

Слева – элемент div без применения преобразования. Справа – фигура повернута в 3D пространстве

Подготовка сцены

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

Задаем глубину сцены с помощью CSS свойства perspective :

Задание большей величины для свойства perspective создает менее заметный 3D эффект, меньшей – делает его более выраженным.

Значение в 800 пикселей или около того подходит, как правило, для большинства маленьких объектов, но если вы создаете что-то большее (например, небоскреб) вы можете использовать меньшее значение для создания более выраженных углов.

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

Создание форм: пространственное мышление

Создание 3D форм при помощи HTML и CSS включает в себя представление объекта в виде набора двухмерных плоскостей.

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

Для начала придадим элементам figure форму и стиль:

На следующем шаге нужно указать, где они должны располагаться в 3D пространстве.

Время преобразований

Размещаем фигуры при помощи свойства transform . Преобразования в CSS состоят из последовательности инструкций, указывающих форме, как перемещаться, поворачиваться, наклоняться и изменяться в масштабе. Инструкции читают слева направо.

Обратите внимание на использование свойства transform-style : когда оно установлено в значении preserve-3d , преобразования над сторонами куба будут осуществляться в их собственном 3D пространстве.

Мы также определяем точку, относительно которой выполняются преобразования.

Свойство transform-origin задает точку в X, Y, Z координатах, которая выполняет роль центра вращения (это середина передней части элемента):

Илон Маск рекомендует:  Что такое код pdf_save

Плоские элементы HTML в 3D пространстве

Передняя фигура смещена на 150 пикселей вперед, задняя – перевернута на 180 градусов и сдвинута на 150 пикселей к задней части сцены.

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

Как и ранее порядок правил преобразований имеет значение. Если элемент повернут, его Z-ось будет находиться под другим углом, что повлияет на любое другое преобразование.

Теперь разместим другие стороны:

Теперь у нас полностью есть куб, расположенный на 3D сцене.

Двигай, двигай

Давайте повернем наше 3D творение на сцене с помощью CSS анимаций:

CSS анимации создаются с помощью последовательности ключевых кадров. Ключевые кадры – это набор состояний объекта, установленных с использованием процентных отношений.

Анимация начинается с нулевого поворота и завершается полным поворотом элемента вокруг оси Y.

Примените это набор ключевых кадров со свойством animation :

Анимация поворота, примененная здесь, рассчитана на 10 секунд, повторяется бесконечно с постоянной линейной скоростью:

Готовый куб, созданный из шести HTML элементов

Затенение

У нас есть куб, вращающийся на сцене, но сейчас он освещен со всех сторон. Чтобы добавить тень, не задействовав больше селекторов, мы воспользуемся псевдо-селекторами.

Псевдо-селекторы – это что-то вроде дополнительных HTML элементов, которые можно вставить до и после содержимого элемента.

Они предоставляют нам дополнительные возможности и могут содержать градиенты, цвета или даже текст. Таким образом, мы можем анимировать затемнение на каждой стороне куба.

Нам нужно два градиента: один – для случая, когда поверхность поворачивается налево, другой – для поворота направо:

Элементы before и after в этом примере являются псевдо-селекторами, которые могут быть стилизованы и анимированы.

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

Применяем анимацию к каждому псевдо-селектору для определения времени отображения/скрытия этих градиентов:

Каждая анимация состоит из набора ключевых кадров, которые отображают или скрывают градиент во время анимации.

Ниже приведены ключевые кадры, примененные к задней стороне:

Полный набор анимаций, вместе с префиксами для каждого браузера, находится в файлах проекта.

Вершина и основание

Следующий шаг – вершина и основание куба. Для вершины нужен градиент, который выглядит так, как будто ничего не движется.

Добавьте градиент к элементу top и поверните его в противоположном направлении:

Основание куба не будет видно, но мы можем использовать его, чтобы добавить атрибут box-shadow :

Затенение добавляет чувство глубины в противоположность плоской сцене

Больше, чем просто цвет

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

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

Затенение, которое мы добавили раннее, все еще присутствует здесь, придавая сторонам куба более сильное ощущение глубины. Этот эффект будет работать для любого контента элемента figure .

Отражения

Если анимированного затенения и тени недостаточно, мы можем добавить сцене немного больше глянца с помощью причудливых WebKit фильтров (учтите, что в настоящий момент эта функция возможна только с WebKit ):

Куб с твитами

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

Настройка HTML

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

Используем следующие две текстуры с кубом:

Добавляем содержимое

Добавим содержимое, которое попадает в поле зрения пользователя при повороте куба. Это будет происходить на правой стороне куба. Подключаем в работу немного JavaScript для вызова кнопки « Follow » (доступна на странице кнопок Twitter ).

Элемент figure с классом right должен содержать что-то вроде этого:

Кнопка « Follow » размещается путем добавления правила iframe в CSS :

Добавление фоновых изображений к HTML элементам придает сцене более презентабельный вид

Размещаем твит на кубе

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

Выберите « Создать новую кнопку » (Create new button), затем введите нужный логин Twitter в поле « Имя пользователя » (Username). В этом примере мы используем логин netmag .

Нажмите « Создать кнопку » (Create widget button), чтобы сгенерировать встраиваемый код.

Мы можем стилизовать виджет и задать ширину, высоту и некоторые данные-значения в коде. Замените YOUR_WIDGET_ID на идентификатор, предоставленный в вашем коде для вставки:

Трансформации

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

Добавим несколько переходов к затенению псевдо-селекторов:

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

Псевдо-селектор right:after скрыт, так как мы не будем поворачивать куб на столько, чтобы он потребовался. Лицевой стороне придано затемнение, тем не менее, она светлее правой стороны, когда та поворачивается вперед:

Поворот 3D куба вокруг оси Y

Анимация при наведении

Теперь, добавив эффекты затенения, мы создадим анимированный эффект « подглядывания » когда пользователь наводит курсор на куб при помощи CSS состояния hover :

При наведении курсора куб поворачивается на 50 градусов влево. Это преобразование производится в виде плавного перехода путем применения свойства transition .

Одновременно с этим, непрозрачность псевдо-селекторов на передней и правой сторонах куба переходит в значение 0.2.

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

Полный код HTML и CSS можно найти в файлах проекта:

Трехмерный «твит-куб», показывающий дополнительную информацию при наведении курсора

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

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

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

Производительность и тестирование

При создании 3D объектов нужно помнить о том, что производительность браузеров и скорость компьютера могут очень сильно варьироваться. CSS , на самом деле, не оптимизировано для графически нагруженных, сложных 3D сцен, поэтому нужно быть осмотрительным при работе с публичными проектами.

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

И хотя это только вопрос времени, когда все браузеры будут поддерживать 3D преобразования, градиенты и все изящные штрихи, которые мы использовали здесь, реальность такова, что большинство браузеров все еще их не поддерживают.

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

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

В данном случае мы воспользуемся скриптом Modernizr для того, чтобы выяснить поддерживаются ли 3D преобразования, и если нет, отобразим статичное изображение.

Илон Маск рекомендует:  Что такое код getthresholdstatus

Для начала подключите Modernizr в заголовке HTML:

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

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

Текстуры, примененные к сторонам 3D куба с твитами

Следующие шаги

Стилизованный 3D куб – это, вероятно, не первое, что большинство заказчиков веб-дизайна просят сделать, но некоторые из приведенных подходов могут иметь другое применение.

Можно создать эффект 3D перехода при наведении на логотип – броский способ продемонстрировать новый продукт – или использовать данные подходы для представления и навигации в комплексных данных. Использование Z оси в дизайне открывает двери для многих интересных и веселых идей.

Данная публикация представляет собой перевод статьи « How to create impressive 3D graphics in CSS3 » , подготовленной дружной командой проекта Интернет-технологии.ру

CSS свойство perspective

Свойство perspective определяет, на сколько пикселей удален 3D элемент от точки обзора. Это свойство позволяет изменять перспективу, откуда просматриваются 3D элементы.

При определении свойства perspective для элемента, перспективный вид получают именно дочерние элементы, а не сам элемент.

Свойство perspective воздействует только на 3D трансформированные элементы.

Используйте это свойство вместе со свойством perspective-origin, которое позволяет изменять нижнее положение 3D элементов.

CSS синтаксис

Возможные значения

Значение Описание
расстояние Указывает на сколько пикселей элемент удален от точки обзора. Нулевое или отрицательное значение сбрасывает перспективу.
none Значение по умолчанию. То же, что и 0. Перспектива не задана.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Устанавливаем перспективу откуда будет просматриваться элемент

3D-трансформации в CSS

С помощью 3D-трансформаций, появившихся в спецификации CSS3, есть возможность управлять поведением объекта по оси Z. Если говорить буквально, то данная ось расположена перпендикулярно экрану, т. е. по сути она смотрит зрителю в лицо.

Функции 3D-трансформации являются расширенными функциями двухмерных трансформаций, в которые добавлен параметр для оси Z. Этими функциями являются, например, translate3d() , rotate3d() , scale3d() , а также одиночные записи, такие как translateZ() , rotateZ() , scaleZ() .

Функция perspective()

Кроме всего прочего, в CSS3 была добавлена еще одна функция — perspective() , которая может быть использована для создания эффекта перспективы, глубины в сцене. Перемещая элемент по оси Z с установленной перспективой, можно наблюдать, как он приближается или отдаляется от зрителя.

Итак, данная функция задает расстояние между плоскостью экрана и точкой сходимости линий. Масштабирование элемента пропорционально d/(d – Z), где d (значение перспективы) — это расстояние от графической плоскости до предполагаемого положения глаз зрителя:

На схеме показано, как масштабирование зависит от перспективы и значения Z. На верхнем рисунке Z составляет половину d. Для того, чтобы создать впечатление, что исходный круг (который нарисован сплошным контуром) стал ближе к зрителю (круг, нарисованный пунктиром), круг увеличивается в два раза (результат показан в качестве голубого круга). На нижнем рисунке круг уменьшен на одну треть, чтобы создать впечатление, что он отдалился от исходного положения и зрителя.

Без указания перспективы все точки в Z-пространстве сплюснуты в 2D-плоскости, и восприятие глубины будет отсутствовать как таковое. Для некоторых трансформаций, таких как перемещение (translate) по оси Z, функция перспективы играет важную роль, поскольку делает возможным передать визуальный эффект 3D-трансформации.

Ниже показаны примеры того, как выглядят элементы с перспективой и без:

Perspective-origin — точка отсчета

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

Обратная сторона элемента: backface-visibility

Когда элемент вращается в 3D-пространстве вокруг горизонтальной или вертикальной оси, его обратная сторона по умолчанию видна (visible). При этом содержимое элемента с другой стороны отображается зеркально:

На примере выше правый квадрат повернут по оси Y на 180 градусов. Свойство backface-visibility со значением visible не скрывает содержимое блока, и оно отображается зеркально.

Но если установить для свойства backface-visibility значение hidden , то содержимое элемента будет скрыто с его обратной стороны (включая фон блока). По сути, объект будет невидим на экране, пока он повернут обратной стороной к зрителю.

Но эта возможность может пригодиться, если вам необходимо создать впечатление, что у объекта имеется две стороны. На примере ниже показано, как можно создать игральную карту, используя два фоновых изображения и свойство backface-visibility: hidden . Повернув карту по оси Y на угол более 90 градусов, можно увидеть, как карта развернулась «рубашкой» к зрителю, а лицо карты при этом скрылось:

Эффект двухсторонней игральной карты на CSS3
(кликните по картинке, чтобы увидеть код)

Код HTML для данного примера:

Код CSS для данного примера:

Таковы особенности работы с 3D-пространством в CSS3. Рекомендуем самостоятельно попрактиковаться для лучшего понимания поведения трехмерных элементов. Также не забывайте про префиксы производителей — в реальном проекте их использование обязательно.

В следующем уроке вы узнаете, как заставить объекты плавно переходить от одного состояния к другому. Для этого мы изучим CSS3-свойство transition и все его значения.

CSS perspective Property

Example

Give a 3D-positioned element some perspective:

More «Try it Yourself» examples below.

Definition and Usage

The perspective property is used to give a 3D-positioned element some perspective.

The perspective property defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value.

When defining the perspective property for an element, it is the CHILD elements that get the perspective view, NOT the element itself.

Tip: Also look at the perspective-origin property, which defines at which position the user is looking at the 3D object.

To better understand the perspective property, view a demo.

Default value: none
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS3
JavaScript syntax: object.style.perspective=»50px» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

perspective

Easily manage projects with monday.com

The perspective CSS property gives an element a 3D-space by affecting the distance between the Z plane and the user.

The strength of the effect is determined by the value. The smaller the value, the closer you get from the Z plane and the more impressive the visual effect. The greater the value, the more subtle will be the effect.

Important: Please note the perspective property doesn’t affect how the element is rendered; it simply enables a 3D-space for children elements. This is the main difference between the transform: perspective() function and the perspective property. The first gives element depth while the later creates a 3D-space shared by all its transformed children.

The above demo aims at showing the difference between the function and the property.

  • On the left side, you can see the property applied to the parent ( perspective: 50em ) of transformed elements ( transform: rotateY(50deg) ).
  • On the right side, the perspective is applied from the transform directly on children ( transform: perspective(50em) rotateY(50deg) ).

This shows how setting perspective on the parent make all children share the same 3D-space and thus the same vanishing point.

Let’s try something even cooler: a cube with 3D transforms and perspective.

Here is how the cube is made: it relies on two nested wrappers (one to give the cube perspective and one to wrap all the sides) and 6 elements to make the sides. Each element is given its own transform mixing translating and rotating in the 3D-space (e.g. transform: rotateX(90deg) translateZ(1em) ).

Let’s finish with a demo featuring what could be the base of a real world design: a wall of photographs + captions using perspective and transform.

When hovering over the wall, the children are rotated back to their normal position, cancelling the effect.

Important! Using perspective (with a value different from 0 or none) creates a new stacking context.

Other Resources

Firefox 10-15 need -moz-, WebKit browsers may need -webkit-

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

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

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

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

На данной диаграмме показаны три объекта (прямоугольники) на двумерной плоскости. Когда прямоугольники перемещаются по плоскости, то линии перспективы (лучи) могут быть проведены к точке схода, и тогда мы получим трехмерные объекты.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

CSS переходы, трансформации и анимации — Перспектива

Дата публикации: 2015-03-25

От автора: В этой статье из серии статей, посвященных CSS переходам, трансформациям и анимациям, мы рассмотрим на примерах (включая 3D куб) CSS3 свойство perspective.

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

Что такое перспектива?

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

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

-webkit-perspective

Свойство -webkit-perspective применяется при трансформациях элемента, определяет расстояние в пикселях от плоскости дочерних элементов до точки из которой пользователь как бы смотрит на них.

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

Допустимые значения

  • none — дочерние элементы находятся в плоскости родительского элемента
  • — расстояние в пикселях от точки, из которой как бы смотрит пользователь, до плоскости, в которой будут находиться дочерние элементы.
Значение по умолчанию none
Применимо к блочным и строчным элементам
Наследование нет
Поддерживается браузерами
  • Safari 4.0.3/Mac OS X и выше, и с Safari 5/Win и выше

Пример

Заметки

В спецификации CSS3 есть аналогичное свойство perspective.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL