perspective-origin | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Четверг, 08.12.2016
Главная » Справочник CSS3 » 2D & 3D Трансформация


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


perspective-origin | Свойство CSS

Свойство 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">
<!--
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 50px;
padding:10px;
border: 1px solid black;
}

#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg);
}
-->
</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://www.w3.org/TR/css3-transforms/#perspective-origin
Категория: 2D & 3D Трансформация | Добавил: IZOTOP (29.05.2012) | Автор: Меренков Михаил E W
Просмотров: 929 | Теги: css, пример, style, perspective-origin | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

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