CSS :: Свойство perspective
http://belarusweb.net
Основы создания сайтов

CSS :: Свойство perspective

css-свойство perspective (от англ. perspectiveперспектива, вид вдаль) активирует 3D-пространство внутри элемента-родителя и задает 3d-перспективу, т.е. расстояние по оси Z от плоскости экрана до точки сходимости линий (см. рис. №1). В результате создается впечатление приближения либо отдаления элемента от зрителя.

Рис. №1. Зависимость масштабирования вдоль оси Z от 3d-перспективы

Масштабирование элемента пропорционально d/(d–z), где d (значение перспективы) - это расстояние от плоскости экрана до предполагаемого положения глаз зрителя, а Z - координата желаемого расположения плоскости элемента на оси Z, направленной к пользователю. Так на верхнем рисунке, чтобы создать для пользователя впечатление, что исходный круг (изображен сплошным контуром) на экране стал ближе к нему в два раза (круг изображен пунктиром), его размер также необходимо увеличить в два раза (голубой круг), т.к. d/(d–d/2)=2 (здесь z=d/2). На нижнем рисунке изображена ситуация, когда у пользователя создается впечатление, что исходный круг на экране удалился от него на половину расстояния от пользователя до экрана. Для этого потребовалось уменьшить размер исходного круга на треть, т.к. d/(d–(-d/2))=d/(d+d/2)=2/3 (здесь z=-d/2).

Cледует иметь в виду, что если перспективу не задавать, то будут отсутствовать и эффекты трансформации в трехмерном пространстве, например, повороты элемента вокруг осей X и Y или его перемещение вдоль оси Z.

Характеристики

  • Значение по умолчанию: none.
  • Применяется: к трансформируемым элементам.
  • Наследуется: нет.
  • Анимируется: да.
  • JavaScript: object.style.perspective="value".

Синтаксис

perspective: <расстояние> | none

Значения

  • расстояние – любые доступные в CSS единицы измерения длины (если не указаны, то по умолчанию будут использованы пиксели), при этом чем больше положительное значение, тем менее выражен эффект перспективы, и наоборот. Отрицательные значения и нуль отменяют действие перспективы.
  • none – отменяет действие перспективы (используется по умолчанию).

Ссылки

Примеры

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
				
		/* Оформляем родительский div абзацев */
		div{
		width: 550px;
		height: 550px;
		margin: auto;		
		padding: 40px;
		background-color: #DFDFDF;
		border-radius: 5px;
		perspective: 300px;
		}
		
		/* Это общий стиль абзацев */		
		p{
		width: 320px;
		margin: auto;
		margin-top: 20px;
		padding: 30px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		}

		/* Это класс 1-го трансформируемого абзаца */	
		.p_1{transform: rotateX(0.3rad);}
		
		/* Это класс 2-го трансформируемого абзаца */	
		.p_2{transform: perspective(100px) rotateX(0.3rad);}	
		
	</style>
		
</head>
<body>
		
	<div>
		<p>
			Я простой абзац, меня никто не трансформировал. 
		</p>
		
		<p class="p_1">
			Я дочерний элемент div'а, поэтому ко мне 
			применима перспектива (perspective: 300px;) 
			и заметен поворот вокруг оси Х, т.к.
			transform: rotateХ(0.3rad).
		</p>
		
		<p class="p_2">
			Моя перспектива была переопределена функцией 
			transform: perspective(100px) rotateX(0.3rad).
		</p>
			
	</div>

</body>
</html>

Пример №1