perspective-origin

Свойство perspective-origin устанавливает глубину видимых элементов из разных осевых точек наблюдателя, то есть наблюдатель может взлянуть на вложенные элементы из разных точек. На момент создания статьи свойство не поддерживалось ни одним браузером, за исключением Safari и Chrome, поддерживающими альтернативное свойство -webkit-perspective-origin. Это свойство должно применяться совместно со свойством perspective и префиксами (альтернативными свойствами) к нему. Свойство применимо к блочным и строчным элементам, создано в версии CSS3 и проходит валидацию согласно версии CSS3.

Дополнительные свойства применяемые к perspective-origin

Свойство	Описание
-webkit-perspective-origin	Альтернативное свойство для браузеров Safari и Chrome, поддерживает 3D трансформацию

Дополнительные значения применяемые к perspective-origin

Значение	Описание
<Число>	Числовое значение расстояния, от левого верхнего угла элемента, до координат точки, из которой наблюдатель видит вложенные элементы
<Процент>	Значение в процентах от левого верхнего угла элемента, до координат точки из которой наблюдатель видит вложенные элементы в процентах от размера элемента, где координата по оси X вычисляется в процентах от ширины элемента, а координата по оси Y от высоты
left	Положение, при котором координата по оси X равна 0, а точка зрения по оси X находиться на левой границе элемента
right	Положение, при котором координата по оси X равна 100% или ширине элемента, а точка зрения по оси X находиться на правой границе элемента
top	Положение, при котором координата по оси Y равна 0, а точка зрения по оси Y находиться в верхней границе элемента
bottom	Положение, при котором координата по оси Y равна 100% или ширине элемента, а точка зрения по оси Y находиться в нижней границе элемента
center	Положение, при котором координата по оси X равна 50%, то есть по оси X наблюдатель видит другие элементы из центра элемента. Если перед этим значением идет значение left или right, задает координату по оси y равную 50%. Если после этого значения идет значение top или bottom, задает координату по оси X, равную 50%. Если дополнительные значения положения отсутствуют, задает значение равное 50% по обеим осям.

Свойство работает в браузерах

В этом браузере работает с применением альтернативного свойства

Пример применения свойства

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Генератор свойства perspective-origin для Safari и Chrome</title>
<style type="text/css">

</style>
<script type="text/javascript">
function changePersp(value)
{
document.getElementById('div1').style.webkitPerspective=value;
document.getElementById('persp').innerHTML=value;
}

function changeOrgPersp()
{
var x=document.getElementById('operspx').value;
var y=document.getElementById('operspy').value;
document.getElementById('div1').style.webkitPerspectiveOrigin=x + '% ' + y + '%';
document.getElementById('opersp').innerHTML=x + "% " + y + "%";
}
</script>
</head>
<body onload="changePersp(200);updateOrigPerpective()">
<center>
<h3>Генератор свойства perspective-origin для Safari и Chrome</h3>
<p>Введите значение в поле и нажмите Enter &crarr; ( работает только в Safari и Chrome)</p>
<div id="div1">
<div id="div2">Элемент</div></div>
Change perspective:<br>
<input type="range" min="45" max="5000" value="200" onchange="changePersp(this.value)"><br>
webkit-perspective: <span id="persp">200</span>;<br><br>
Change the Origins:<br>
X-axis:<input type="range" min="-100" max="200" value="50" onchange="changeOrgPersp()" id="operspx"><br>
Y-axis:<input type="range" min="-100" max="200" value="50" onchange="changeOrgPersp()" id="operspy"><br>
webkit-perspective-origin: <span id="opersp">50% 50%</span>;
</center>
</body>
</html>

Пример в действии

Источники: http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Трансформация | Добавил: evkuriy (05.07.2013)

Просмотров: 662 | Рейтинг: 0.0/0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]