Вторник, 27 Ноября 2012 09:14

Свойство transform

Written by 
Оцени эту запись
(1 Голос)

Свойство transform позволяет делать двухмерную трансформацию элемента. Это свойство содержит список функций трансформации. Значение по умолчанию - none. Применимо для блочных и строчных элементов.

 

 

transform: none | <transform-function>

 

Пример:

 

<div style="background: blueviolet; width: 100px; height: 100px; -webkit-transform: skewX(30deg) scaleX(2);">&nbsp;</div>

 

 

 

 

Свойство transform-origin определяет центр трансформации элемента. Значения координат центра можно задавать в процентах, пикселях, а также top, left, center, bottom, right. 

 

Значением свойства transform является функция трансформации.

 

Возможны такие функции:

 

 -- none

 

 -- matrix(<number>, <number>, <number>, <number>, <number>, <number>,<number>)

определяет матрицу двухмерной трансформации, на которую будет умножена матрица исходных координат элемента

 

 -- translate(<translation-value>)

определяет двухмерную трансформацию в виде вектора, где первая координата задает смещение элемента по оси x, а вторая - по оси y. Если задана только одна координата, то смещение по оси y равно 0.

 

 -- translateX(<translation-value>)

Задает значение смещения по оси x.

 

 

-- translateY(<translation-value>)

Задает значение смещения по оси y.

 

-- scale(<number>)

задает масштабирование элемента по осям x и y, если задано два параметра. Если второй параметр на задан, то он считается равным первому.

 

-- scaleX(<number>)

задает масштабирование элемента по оси x

 

 

-- scaleY(<number>)

задает масштабирование элемента по оси y

 

 -- rotate(<angle>)

Определяет поворот элемента на указанный угол

 

 -- skew(<angle>)

Задает наклон элемента по оси x и по оси y, если заданы оба значения. Если задано только одно значение, то наклон по оси y равен нулю.

 

 -- skewX(<angle>)

Определяет наклон элемента по оси x

 

 

 -- skewY(<angle>)

Определяет наклон элемента по оси y

 

 

translate(20px 40px)
transform: scale(2, 0.5)
rotate(20deg)
transform: skew(10deg, 30deg)

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов