Руководство по CSS

Правила CSS (@RULES)

Полный список свойств CSS

Свойство perspective-origin в CSS3 Свойство page-break-inside в CSS

Метод использования и примеры свойства perspective CSS3

Свойство perspective CSS определяет перспективу всех подэлементов объекта просмотра. Оно обычно определяет расстояние между плоскостью Z = 0 и наблюдателем, чтобы придать 3D-элементам ощущение глубины. Каждый 3D-элемент с Z > 0 становится больше, а каждый 3D-элемент с Z < 0 становится меньше.

В таблице приведено описание использования и истории версий этого свойства, а также синтаксис использования этого свойства в скриптах на JavaScript.

Значение по умолчанию:	none
Подходит для:	Элементы, изменяемые по форме
Наследование:	Нет
Анимация:	да.Пожалуйста, обратитесь к Анимационные свойства.
Версия:	Новые функции CSS3
JavaScript грамматика:	object.style.perspective=500

Синтаксис использования perspective

Грамматика этого свойства такая:

perspective:　length　|　none　|　initial　|　inherit

Ниже приведен пример того, как использовать свойство perspective.

Пример

.container　{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　500px;
　　　　border:　4px　solid　#e5a043;
　　　　background:　#fff2dd;
}
.transformed　{
　　　　-webkit-transform:　translate3d(25px,　25px,　50px);　/*　Chrome,　Safari,　Opera　*/
　　　　transform:　translate3d(25px,　25px,　50px);　
}

Проверьте, посмотрите‹/›

Значения свойств

В таблице ниже описаны значения этого свойства.

Значение	Описание
length	Указывает значение длины глубины перспективы. Если оно равно 0 или отрицательно,透视 трансформация не применяется.
none	Не применять透视 трансформацию. Это значение по умолчанию.
initial	Установить это свойство в его значение по умолчанию.
inherit	Если указано, то связанный элемент использует значение свойства perspective родительского элемента.

Совместимость браузеров

Совместимость браузеров для свойства perspective, числа в таблице ниже представляют собой минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это свойство.

	Firefox 10+ ^-moz-, 16 + Google Chrome 12+ ^-webkit-, 36+ Internet Explorer 10+ Apple Safari 4.0.3+ ^-webkit- Opera 15+ ^-webkit-, 23+

Для получения дополнительной информации

Пожалуйста, обратитесь к следующим руководствам:CSS3 3D-трансформации.

Связанные свойства:perspective-origin,backface-visibility,transform,transform-origin,transform-style.

Свойство perspective-origin в CSS3 Свойство page-break-inside в CSS