Авторский знак. 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.

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

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

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

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


Синтаксис:

              perspective: length|none;

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

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


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

Значение Описание
length Как далеко элемент помещается от просмотра
none Значение по умолчанию 0. Перспектива не установлена
initial Это свойство задает значение по умолчанию.
inherit Наследует это свойство от своего родительского элемента.


Пишем программу:

< !DOCTYPE>
< html>
< head>
< style>
#rr1
{
position: relative;
height: 250px;
width: 250px;
margin: 50px;
padding:10px;
border: 1px solid #07F;
-webkit-perspective:150px; /* Chrome, Safari, Opera  */
perspective:150px;
}

#rr2
{
padding:50px;
position: absolute;
border: 1px solid #07F;
background-color:#F7C;
-webkit-transform: rotateX(45deg); /* Chrome, Safari, Opera  */
transform: rotateX(45deg);
}
< /style>
< /head>
< body>

< div id="rr1">
< div id="rr2">ПРИВЕТ!!!< /div>
< /div>
 
< /body>
< /html>                      

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

ПРИВЕТ!!!


Вот, пишем универсальную программу для изменения перспективы:
ПРИВЕТ!!!
Изменение перспективы:

perspective: ;


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
... ... ...
ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: