САМОУЧКА Сайт для тех, кто хочет научиться

Главная

О Нас

Публикации

Связь

Наши публикации

HTML для новичков

XHTML

CSS для новичков

CSS 3

JavaScript

<Предыдущая Следующая>

С помощью CSS3 функций трансформирования Вы можете перемещать, поворачивать и растягивать элементы.

CSS3 трансформирование

Обратите внимание: свойства рассмотренные в данной главе работают во всех современных браузерах (IE9+, Safari, Chrome, Firefox, Opera), 
но для некоторых браузеров требуется добавления специальных префиксов. Для браузеров Chrome и Safari требуется префикс -webkit, для браузера IE версии 9 требуется префикс -ms (для IE10 данный префикс не требуется).

С помощью CSS3 свойства transform Вы можете трансформировать элементы. В качестве значения данного свойства должна указываться одна из функций трансформирования.

На данный момент в современных браузерах поддерживаются только 2D трансформации, но в будущем будут также доступны и 3D трансформации.

С помощью функции translate(x,y) Вы можете сместить элемент на указанное количество пикселей по горизонтали и вертикали.

Пример

 
#el2 {
transform: translate(180px,180px);
}
 

С помощью функции rotate(градусы) Вы можете повернуть элемент на указанное количество градусов по часовой стрелке.

Пример

 
#el3 {
transform: rotate(45deg);
}
#el4 {
transform: rotate(120deg);
}
 

С помощью метода scale(x,y) Вы можете растянуть элемент в ширину или высоту.

Пример

 
#el6 {
transform:scale(1.3,1);
}
 

С помощью метода skew(x,y) Вы можете скосить элемент на указанное количество градусов по горизонтали и вертикали.

Пример

 
#el7 {
transform:skew(40deg,20deg);
}
 

CSS3 функции трансформирования

Функция	Описание
translate(x,y)	Смещает элемент от изначальной позиции по горизонтали и вертикали.
translateX(x)	Смещает элемент по горизонтали.
translateY(y)	Смещает элемент по вертикали.
scale(x,y)	Растягивает элемент по вертикали и горизонтали.
scaleX(x)	Растягивает элемент по горизонтали.
scaleY(y)	Растягивает элемент по вертикали.
rotate(градусы)	Поворачивает элемент по часовой стрелке.
skew(x,y)	Скашивает элемент по горизонтали и вертикали.
skewX(x)	Скашивает элемент по горизонтали.
skewY(y)	Скашивает элемент по вертикали.
matrix(x,x,x,x,x,x)	Совмещает все перечисленные выше методы в один.

<Предыдущая Следующая>

Последние добавления

HTML для новичков

XHTML

CSS для новичков