Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30


Чувашия-это моя Россия

Ссылки на каскадные стили CSS - perspective-origin.

Поддержка Браузеров

Internet Explorer Интернет эксплорер Google Chrome Google Chrome Opera Опера Firefox Firefox Safari Сафари, то есть поддерживается во всех основных браузерах.

Определение и использование. Свойство perspective-origin задает самые основные элементы 3D основаны, то есть направления дальнейших преобразований и в первую очередь координатные х-ось, у-ось. Замечательное свойство perspective-origin заботится об изменениях нижней позиции 3D-элементов. При определении свойств perspective-origin задаются свойства дочерних элементов, которые расположены на этих позициях, но никак свойства самого элемента.

Внимание!!! Свойство perspective-origin следует использовать вместе с свойством perspective-property, потому как влияет только на 3D преобразованные элементы!

Итак, по простому говоря, свойство perspective-origin задает начало координат для свойства perspective. Свойство perspective-origin определяет положение на оси x и y, откуда пользователь смотрит на дочерние элементы. Для свойства perspective-origin задается одно или два значения длины. Первое значение длины задает положение на оси x по отношению к полю, содержащему выбранный элемент. Может быть числовое значение длины, процентное соотношение или одно из следующих трех ключевых слов: left (указывает 0 % длины по оси x поля, содержащего элемент), center (указывает срединную точку) или right (указывает 100 % длины). Второе значение длины указывает положение на оси y по отношению к полю, содержащему элемент. Может быть числовое значение длины, процентное соотношение или одно из следующих трех ключевых слов: top (указывает 0 % длины по оси Y поля, содержащего элемент), center (указывает срединную точку) или bottom (указывает 100 % длины).

Особенно интересное и полезное в данном случае не в том, что совершается какое-то изменение какого-то участка( элемента) страницы сайта. Вся удивительная и необходимая информация содержится в том, что свойство perspective-origin, которое действует через стили CSS3 самостоятельно и независимо работает и при отключения JavaScripta в браузере Вашего компьютера. Вам не надо гадать: будет работать - не будет работать, потому как работает постоянно и стабильно.


Синтаксис:

            perspective-origin: x-axis y-axis|initial|inherit;

Описание и Использование

Значение по умолчанию: 50% 50%
наследует: нет
Версия: CSS3
JavaScript синтаксис: object.style.perspectiveOrigin="10px 50%"


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

Значение Описание
x-ось Перспектива размещенная на оси X

Возможные значения:

  • left
  • center
  • right
  • length
  • %

Значение по умолчанию: 50%

y-ось Перспектива размещенная на оси Y

Возможные значения:

  • top
  • center
  • bottom
  • length
  • %

Значение по умолчанию: 50%

initial Это свойство задает значение по умолчанию.
inherit Наследует это свойство от своего родительского элемента.


Пишем универсальную программу для изменения перспективы по осям икс и игрек:

< !DOCTYPE>
< html>
< head>
< style>
#div1
{
position: relative;
height: 250px;
width: 250px;
margin: 50px;
padding:10px;
border: 1px solid #07F;
}

#div2
{
padding:50px;
position: absolute;
border: 1px solid #07F;
background-color:#F7C;
-webkit-transform: rotateX(45deg); /* Chrome, Safari, Opera */
transform: rotateX(45deg);
}
< /style>
< script>
function changePersp(value)
{
document.getElementById('div1').style.perspective=value + "px";
document.getElementById('div1').style.webkitPerspective=value + "px";
document.getElementById('persp').innerHTML=value;
}

function changeOrgPersp()
{
var x=document.getElementById('operspx').value;
var y=document.getElementById('operspy').value;
document.getElementById('div1').style.perspectiveOrigin=x + '% ' + y + '%';
document.getElementById('div1').style.webkitPerspectiveOrigin=x + '% ' + y + '%';
document.getElementById('opersp').innerHTML=x + "% " + y + "%";            
}
< /script>
< /head>

< body onload="changePersp(200);">

< div id="div1">
< div id="div2">ПРИВЕТ!!!< /div>
< /div>

Изменение перспективы:< br>
< input type="range" min="45" max="1000" value="200" onchange="changePersp(this.value)" />
                                                                                 < br>
perspective: < span id="persp">< /span>;< br>

Изменение осей:< br> X-ось:< input type="range" min="-100" max="200" value="50" onchange="changeOrgPersp()" id="operspx" />< br> Y-ось:< input type="range" min="-100" max="200" value="50" onchange="changeOrgPersp()" id="operspy" />< br> perspective-origin: < span id="opersp">50% 50%< /span>; < /body> < /html>

Результат программы:

ПРИВЕТ!!!
Изменение перспективы:

perspective: ;

Изменение осей:
X-ось:
Y-ось:
perspective-origin: 50% 50%;


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...
ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: