CSS свойство transform
Добрый день, сегодня я снова с Вами, и предлагаю к изучению одну замечательную возможность, которая была добавлена в CSS3, а именно CSS свойство transform. Раньше и речи не было о том, как можно влиять на элемент при помощи языка CSS, но прошло время, и разработчики предоставили нам такую возможность. При помощи данного свойства мы можем трансформировать какой-либо элемент, например, вращать его, наклонять, или масштабировать. Сегодня мы и рассмотрим все возможности, которые предоставляет CSS свойство transform. Но для начала, да в принципе, как и обычно, нам необходимо написать HTML код, а затем уже приступать к трансформации. Ну что же, начинаем:
<html>
<head>
<title>Трансформация блока</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div></div>
</body>
</html>
Структуру мы написали, она довольно простая, осталось разобраться с самим свойством. В первом примере мы будем использовать функцию под названием rotate, при помощи которой мы можем вращать элемент на заданный угол в градусах:
div {
background: #f99;
border:1px solid #000;
transform: rotate(10deg);
height: 100px;
width: 100px;
}
Вторая функция позволяет масштабировать элемент и называется scale. Значения в ней указываются в единицах. Если значение больше единицы, то масштаб будет увеличен, если меньше, то уменьшен. Значения указываются через запятую и означают соответственно масштаб по оси Х, и по оси Y, если указать одно значение, то оно будет принято к двум осям одновременно. Если необходимо указать масштаб для одной оси существуют функции scaleX и scaleY, при необходимости вы их можете также использовать.
div {
transform: scale(2, 3);
}
Функция skew, позволяет наклонять блок. Как и предыдущая функция, значения задаются для оси X и оси Y, однако, значения принимаются в градусах. И существуют аналогичные свойства для каждой оси отдельно, skewX и skewY
div {
transform: skew(20deg, 30deg);
}
Функция translate сдвигает элемент на указанное расстояние. Также соответственно по оси Х и оси Y. Возможно применение функций translateX и translateY.
div {
transform: translate(35px, 60px);
}
Вот мы и разобрали основные манипуляции, которые можно производить с элементами, на результат выполнения нашего кода вы можете посмотреть ниже.
Как видите, все предельно понятно. Надеюсь, изученное свойство будет Вам полезно, ведь при его помощи можно делать различные штуки, была бы фантазия. На этом все, всего доброго.
