Свойство perspective-origin задает точку расположения наблюдателя при взгляде на перспективу. Это свойство следует использовать совместно с perspective.

Синтаксис

селектор {
	perspective-origin: X-ось Y-ось | inherit;
}

Значения для оси X: left, center, right, CSS единицы, проценты. Значения для оси Y: top, center, bottom, CSS единицы.

Значения

Значение Описание
left Наблюдатель находится слева.
right Наблюдатель находится справа.
top Наблюдатель находится сверху.
bottom Наблюдатель находится снизу.
center Наблюдатель находится по центру.
inherit Наследует значение родителя.

Значение по умолчанию: center center.

Примеры

Пример

В данном примере у нас есть элемент, который повернут по оси Y (без этого мы не увидим эффекта), а к его родителю применена перспектива. При этом perspective-origin имеет значение center center:

#parent {
	-o-perspective-origin: center center;
	-ms-perspective-origin: center center;
	-moz-perspective-origin: center center;
	-webkit-perspective-origin: center center;
	perspective-origin: center center;
	-o-perspective: 300px;
	-ms-perspective: 300px;
	-moz-perspective: 300px;
	-webkit-perspective: 300px;
	perspective: 300px;
	border: 1px solid black;
	margin: 100px;
	display: inline-block;
}
#elem {
	border: 3px solid black;
	width: 300px;
	height: 100px;
	-o-transform: rotateY(60deg);
	-ms-transform: rotateY(60deg);
	-moz-transform: rotateY(60deg);
	-webkit-transform: rotateY(60deg);
	transform: rotateY(60deg);
}

Результат выполнения кода:

Привет, мир!

Пример

А теперь зададим perspective-origin в right top:

#parent {
	-o-perspective-origin: right top;
	-ms-perspective-origin: right top;
	-moz-perspective-origin: right top;
	-webkit-perspective-origin: right top;
	perspective-origin: right top;
	-o-perspective: 300px;
	-ms-perspective: 300px;
	-moz-perspective: 300px;
	-webkit-perspective: 300px;
	perspective: 300px;
	border: 1px solid black;
	margin: 100px;
	display: inline-block;
}
#elem {
	border: 3px solid black;
	width: 300px;
	height: 100px;
	-o-transform: rotateY(60deg);
	-ms-transform: rotateY(60deg);
	-moz-transform: rotateY(60deg);
	-webkit-transform: rotateY(60deg);
	transform: rotateY(60deg);
}

Результат выполнения кода:

Привет, мир!

Пример

А теперь зададим perspective-origin в right bottom:

#parent {
	-o-perspective-origin: right bottom;
	-ms-perspective-origin: right bottom;
	-moz-perspective-origin: right bottom;
	-webkit-perspective-origin: right bottom;
	perspective-origin: right bottom;
	-o-perspective: 300px;
	-ms-perspective: 300px;
	-moz-perspective: 300px;
	-webkit-perspective: 300px;
	perspective: 300px;
	border: 1px solid black;
	margin: 100px;
	display: inline-block;
}
#elem {
	border: 3px solid black;
	width: 300px;
	height: 100px;
	-o-transform: rotateY(60deg);
	-ms-transform: rotateY(60deg);
	-moz-transform: rotateY(60deg);
	-webkit-transform: rotateY(60deg);
	transform: rotateY(60deg);
}

Результат выполнения кода:

Привет, мир!