
С помощью свойства в CSS 3 transform можно трансформировать различные объекты и элементы сайта, под трансформацией понимается: растягивание или сжатие объекта, поворот его на произвольное количество градусов, а так же смещение и скашивание.
Основные функции:
- 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) - Совмещает все перечисленные выше методы в один.
Пример смещения блока:
<head>
<style type='text/css'>
#el1,#el2 {
position:absolute;
top:10px;
left:10px;
background-color:#ff0000;
color:white;
width:300px;
height:100px;
font-size:1.5em;
border:1px #000 solid;
}
#el2 {
transform: translate(180px,180px);
-webkit-transform: translate(180px,180px);
}
</style>
</head>
<body>
<div id='el1'>Изначальная позиция</div>
<div id='el2'>Позиция после применения translate(180px,180px)</div>
</body>
</html>

Пример поворота блока:
<head>
<style type='text/css'>
#el3,#el4 {
margin:40px;
background-color:#ff0000;
width:130px;
height:110px;
font-size:1.5em;
border:1px #000 solid;
color:white;
padding:10px;
float:left;
}
#el3 {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
#el4 {
transform: rotate(120deg);
-webkit-transform: rotate(120deg);
}
</style>
</head>
<body>
<div id='el3'>Этот элемент повернут на 45 градусов</div>
<div id='el4'>А этот элемент повернут на 120 градусов</div>
</body>
</html>

Пример растягивания элемента:
<head>
<style type='text/css'>
#el5,#el6 {
margin-left:45px;
margin-bottom:10px;
background-color:#ff0000;
width:200px;
height:110px;
font-size:1.5em;
color:white;
padding:10px;
}
#el6 {
transform:scale(1.3,1);
-webkit-transform:scale(1.3,1);
}
</style>
</head>
<body>
<div id='el5'>Элемент до растягивания</div>
<div id='el6'>Элемент после растягивания</div>
</body>
</html>

Пример скашивания элемента:
<head>
<style type='text/css'>
#el7 {
margin-left:70px;
margin-top:50px;
background-color:#ff0000;
width:200px;
height:110px;
font-size:1.5em;
color:white;
padding:10px;
transform:skew(40deg,20deg);
-webkit-transform:skew(40deg,20deg);
box-shadow:3px 3px 3px #000;
}
</style>
</head>
<body>
<div id='el7'>Элемент был развернут с помощью метода skew.</div>
</body>
</html>

- Что такое CSS 3 и что в нём изменилось
- Фон и цвет в CSS 3
- Границы и рамки в CSS 3
- Текст и шрифт в CSS 3
- Создание прозрачных элементов и картинок
- Трансформирование в CSS 3
- Линейные градиенты в CSS 3
- Переходы в CSS 3
- Анимация в CSS 3
- Разбивание текста на столбцы
- Заключение