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


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


Ссылки на каскадные стили CSS - transform-style.

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

Google Chrome Google Chrome Opera Опера Firefox Firefox Safari Сафари

Определение и использование. Свойство преобразования стилей transform-style задает, как вложенные элементы оказываются в 3D-пространстве. Внимание!!! Это свойство transform-style следует использовать вместе с transform-property.

Если свойством transform-style зададите двухмерное отображение выбранного элемента, то все дочерние элементы будут отображаться плоскими в двухмерной плоскости выбранного элемента. Если повернуть элемент относительно оси x или y, то все дочерние элементы, расположенные положительно или отрицательно относительно оси z, появятся в плоскости элемента, но не впереди или позади данного элемента.

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


Синтаксис:

              transform-style: flat|preserve-3d|initial|inherit;

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

Значение по умолчани.: flat
наследует: нет
Версия: CSS3
JavaScript синтаксис: object.style.transformStyle="preserve-3d"


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

Значение Описание
flat Значение по умолчанию. Дочерние элементы не сохраняют свое положение 3D
preserve-3d Дочерние элементы сохраняют свои позиции в 3D изображении
initial Это свойство задает значение по умолчанию.
inherit Наследует это свойство от своего родительского элемента.


Пишем программу - трансформированные избражения сохранить в 3D преобразовании.

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

#rr2
{
padding:40px;
position: absolute;
border: 1px solid #07F;
background-color: #933;
transform: rotateY(50deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(50deg); /* Opera, Chrome, and Safari */
-webkit-transform-style: preserve-3d; /* Opera, Chrome, and Safari */
}

#rr3
{
padding:40px;
position: absolute;
border: 1px solid #07F;
background-color: #CCF;
transform: rotateY(-60deg);
-webkit-transform: rotateY(-60deg); /* Opera, Chrome, and Safari */

}
< /style>
< /head>

< body>

< div id="rr1">
  < div id="rr2">ПРИВЕТ!!!
  	< div id="rr3">МАЛИНОВЫЙ< /div>
  < /div>
< /div>

< /body>
< /html>                      

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

ПРИВЕТ!!!
МАЛИНОВЫЙ



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