Свойство perspectiveCSS дает элементу трехмерное пространство, влияя на расстояние между плоскостью Z и пользователем.
Сила эффекта определяется стоимостью. Чем меньше значение, тем ближе вы подходите к плоскости Z и тем более впечатляющим будет визуальный эффект. Чем больше значение, тем тоньше будет эффект.
Важно: обратите внимание, что свойство перспективы не влияет на то, как визуализируется элемент; он просто предоставляет трехмерное пространство для дочерних элементов. В этом основное отличие transform: perspective()функции от perspectiveсвойства. Первый дает глубину элемента, а второй создает трехмерное пространство, разделяемое всеми его преобразованными дочерними элементами.
/** * Syntax * perspective: none | */ .parent ( perspective: 1000px; ) .child ( transform: rotateY(50deg); ) Приведенная выше демонстрация призвана показать разницу между функцией и свойством.
- Слева вы можете увидеть свойство, примененное к parent (
perspective: 50em) преобразованных элементов (transform: rotateY(50deg)). - Справа перспектива применяется от преобразования непосредственно к дочерним элементам (
transform: perspective(50em) rotateY(50deg)).
Это показывает, как установка перспективы на родителя заставляет всех детей разделять одно и то же трехмерное пространство и, следовательно, одну и ту же точку схода.
Давайте попробуем что-нибудь еще круче: куб с трехмерными преобразованиями и перспективой.
Вот как создается куб: он основан на двух вложенных обертках (одна для создания перспективы куба, а другая для обертывания всех сторон) и 6 элементов для создания сторон. Каждому элементу дается свое собственное преобразование, смешивающее перевод и вращение в трехмерном пространстве (например transform: rotateX(90deg) translateZ(1em)).
Давайте закончим демонстрацией того, что может стать основой дизайна в реальном мире: стена из фотографий + подписи с использованием перспективы и преобразования.
При наведении курсора на стену дети возвращаются в нормальное положение, отменяя эффект.
Важный! Использование перспективы (со значением, отличным от 0 или отсутствия) создает новый контекст наложения.
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | Любой | 10+ | Никто | 10+ | 3+ | Любой |
Firefox 10-15 нужен -moz-, браузерам WebKit может понадобиться -webkit-