Свойство перспективы CSS
❮ Назад Полное руководство по CSS Далее ❯
Пример
Придание трехмерному элементу некоторой перспективы:
#div1
{
перспектива: 100 пикселей;
}
Попробуйте сами »
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство перспектива используется для придания 3D-позиционируемому элементу некоторого
перспектива.
Перспектива 9Свойство 0022 определяет, насколько далеко объект находится от пользователя.
Таким образом, более низкое значение приведет к более интенсивному 3D-эффекту, чем более высокое значение.
При определении свойства перспективы для элемента это дочерние элементы
которые получают вид в перспективе, а НЕ сам элемент.
Подсказка: Также обратите внимание на свойство перспективы-происхождения,
который определяет, в какой позиции пользователь смотрит на 3D-объект.
Чтобы лучше понять свойство перспективы, просмотреть демо.
Показать демо ❯
| Значение по умолчанию: | нет |
|---|---|
| Унаследовано: | нет |
| Анимация: | да. Читать о анимированном Попробуй |
| Версия: | CSS3 |
| Синтаксис JavaScript: | объект .style.perspective="50px" Попробуй |
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Числа, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.
| Собственность | |||||
|---|---|---|---|---|---|
| перспектива | 36,0 12,0 -вебкит- | 10,0 | 16,0 10,0 -мунц- | 9. 0 4.0.3 -вебкит- | 23,0 15,0 -вебкит- |
Синтаксис CSS
перспектива: длина |нет;
Значения свойств
| Значение свойства | Описание | Демо |
|---|---|---|
| длина | Как далеко элемент расположен от вида | Демонстрация ❯ |
| нет | Значение по умолчанию. То же, что и 0. Перспектива не задана | Демонстрация ❯ |
| начальный | Устанавливает для этого свойства значение по умолчанию. Читать про начальный | |
| унаследовать | Наследует это свойство от родительского элемента. Читать о унаследовать |
Другие примеры
Пример
Создайте куб и установите разные перспективы:
.
ex1 {
перспектива: 800 пикселей;
}
.ex2 {
перспектива: 150 пикселей;
}
Попробуйте сами »
Связанные страницы
Учебник CSS: 3D-преобразования CSS
Ссылка HTML DOM: свойство перспективы
❮ Предыдущая Полное руководство по CSS Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
Основные ссылки
Справочник по HTMLСправочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
1 Лучшие примеры0202
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To Примеры
Примеры SQL
Примеры Python
Примеры W3.
CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Свойство источника перспективы CSS
❮ Предыдущий Полное руководство по CSS Далее ❯
Пример
Определите, с какой позиции пользователь смотрит на 3D-позиционированный элемент:
#div1
{
перспектива: 100 пикселей;
перспектива-начало: слева;
}
Попробуйте сами »
Определение и использование
Свойство Perspective-Origin определяет, с какой позиции находится пользователь.
глядя на 3D-позиционированный элемент.
При определении свойства проекция-происхождение для элемента это дочерние элементы
который получит эффект, а НЕ сам элемент.
Примечание: Это свойство должно использоваться вместе с перспективная недвижимость!
Чтобы лучше понять свойство перспективы-происхождения, просмотреть демо.
Показать демо ❯
| Значение по умолчанию: | 50% 50% |
|---|---|
| Унаследовано: | нет |
| Анимация: | да. Читать о анимированном Попробуй |
| Версия: | CSS3 |
| Синтаксис JavaScript: | объект .style.perspectiveOrigin="10px 50%" Попробуй |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Числа, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.
| Собственность | |||||
|---|---|---|---|---|---|
| перспективное происхождение | 36,0 12,0 -вебкит- | 10,0 | 16,0 10,0 -мунц- | 9.0 4.0.3 -вебкит- | 23,0 15,0 -вебкит- |
Синтаксис CSS
перспектива-происхождение: ось x ось y |initial|inherit;
Значения свойств
| Значение свойства | Описание | Демо |
|---|---|---|
| ось X | Определение места расположения вида по оси x Возможные значения:
Значение по умолчанию: 50% | Демонстрация ❯ |
| ось Y | Определение места расположения вида по оси Y Возможные значения:
Значение по умолчанию: 50% | Демонстрация ❯ |
| начальный | Устанавливает для этого свойства значение по умолчанию. Читать про начальный | |
| унаследовать | Наследует это свойство от родительского элемента. Читать о унаследовать |
Связанные страницы
Учебник CSS: 3D-преобразования CSS
Ссылка на HTML DOM: Перспективное свойство Origin
❮ Предыдущий Полное руководство по CSS Далее ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник HTMLУчебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
900 Справочник
900
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Основные примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры How To Примеры
Примеры SQL
Примеры Python
Примеры W3.
