Трансформирование в CSS 3

С помощью свойства в 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) - Совмещает все перечисленные выше методы в один.

Пример смещения блока:

<html>
<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>

Пример поворота блока:

<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>

Пример растягивания элемента:

<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>

Пример скашивания элемента:

<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
- Разбивание текста на столбцы
- Заключение