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

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

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

Определение и использование. Свойство transform определяет функции преобразований, которые можно применить к заданному элементу. Свойству transform может быть задан разделенный пробелами список функций преобразования или ключевое слово none, которое означает, что функции преобразования не применяются. Свойство transform применяется для 2D-или 3D-преобразования элемента. Свойство transform позволяет элементы поворачивать, масштабировать, перемещать, наклонять и т.д.

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


Синтаксис:

           transform: none|transform-functions|initial|inherit;  
           
           примеры: 
           
           div {    
                transform: perspective(550px) translateZ(-70px);
                 }
     ------------------------------------------------------            
            div #ww {    
                transform: none;
                 }
     ------------------------------------------------------
                 
           div {    
                 transform: perspective(520px) translateZ(-50px);
                 }
     ------------------------------------------------------           
                 
           div {
                 transform: translate3d(30px, -70px, 40px); 
                    }
     ------------------------------------------------------               
        
           div {
                     transform: scale3d(0.6, -0.7, 1.8);
                   }
     ------------------------------------------------------              
                   
           div {
                    transform: perspective(530px) scaleZ(2) rotateX(60deg);
                 }
     ------------------------------------------------------            
                 
           div {
                   transform: rotate3d(0.8, 0.4, 0.6, 30deg);
                     }
     ------------------------------------------------------                
                     
           div {
                   transform: perspective(550px) rotateY(30deg);
                  }
     ------------------------------------------------------             
                  
           div {
                     transform: rotateZ(45deg);
                    }

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

Значение по умолчанию: none
наследует: нет
Версия: CSS3
JavaScript синтаксис: object.style.transform="rotate(7deg)"


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

Значение Описание
none Определяет, что должно ли быть трансформации
matrix(n,n,n,n,n,n) Определяет преобразование 2D, с помощью матрицы из шести значений
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
пределяет 3D-преобразования с использованием матрицы 4x4 из 16 значений
translate(x,y) Определяет 2D преобразование
translate3d(x,y,z) Определяет 3D преобразование
translateX(x) Определяет перевода, используя только значение для оси X
translateY(y) Определяет перевода, используя только значение для оси Y
translateZ(z) Определяет перевода, используя только значение для оси Z
scale(x,y) Определяет масштабные преобразования 2D
scale3d(x,y,z) Определяет масштабные преобразования 3D
scaleX(x) Определяет масштаб преобразований, придав значения по оси X
scaleY(y) Определяет масштаб преобразований, придав значения по оси Y
scaleZ(z) Определяет масштаб преобразований, придав значения по оси Z
rotate(angle) Определяет 2D вращения, угла, указанного в параметре
rotate3d(x,y,z,angle) Определяет 3D вращение
rotateX(angle) Определяет 3D вращение по оси X
rotateY(angle) Определяет 3D вращение по оси Y
rotateZ(angle) Определяет 3D вращение по оси Z
skew(x-angle,y-angle) Определяет 2D преобразования наклона оси X и оси Y
skewX(angle) Определяет 2D преобразования наклона по оси X
skewY(angle) Определяет 2D преобразования наклона по оси Y
perspective(n) Определяет перспективу для 3D-трансформированных элементов
initial Это свойство задает значение по умолчанию.
inherit Наследует это свойство от своего родительского элемента.


Пишем программу - повернуть элемент div^

< !DOCTYPE >
< html>
< head>
< style> 
div
{
width:180px;
height:80px;
background-color: #F9C;
/* Rotate div */
transform:rotate(15deg);
-ms-transform:rotate(15deg); /* IE 9 */
-webkit-transform:rotate(15deg); /* Opera, Chrome, and Safari */
}
< /style>
< /head>
< body>

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