Развитие веб-технологий не стоит на одном месте. Сейчас в сайтостроении активно используются технологии HTML5 и CSS3. Разработчики все чаще используют эти стандарты. Несмотря на то, что спецификации этих языков еще находятся в разработке, большинство современных браузеров и мобильных устройств поддерживают их.
HTML5 — язык для структурирования и представления содержимого в интернете. Пятая версия HTML-стандарта находится в стадии разработки по состоянию на июль 2012 года. Цель разработки такого стандарта - улучшить язык, поддерживающий работу с новейшими мультимедийными приложениями. По словам разработчиков, язык будет упрощен и удобен в процессе создания сайта, а также сохраняется лёгкость чтения кода для человека и ясность исполнения для компьютеров и веб-браузеров.
CSS3 – 3 уровень формального языка описания внешнего вида web-документа. Различные эффекты трансформаций, анимаций, теней, закругления углов у элементов и много других изменений в оформлении блоков и текста на странице, все это нам дает этот новый стандарт, который уже широко используется в рзработке сайтов.
Существует 2 типа трансформаций: в 2d плоскости и в 3d плоскости. В данной статье рассматривается только первый тип css3 транформаций.
Методы 2d трансформации:
translate()
rotate()
scale()
skew()
matrix()
Поддержка браузеров
|
Свойство |
Поддержка браузеров ( с префиксами ) |
|
transform |
-ms - InternetExplorer -moz - MozillaFirefox -webkit - Chrome, Safari -o - Opera |
метод TRANSLATE()
С помощью метода translate(), элемент перемещается из текущего положения, в зависимости от параметров, приведенных для левой (X-ось) и верхней (Y-ось) позиции:
Пример (синтаксис стиля)
transform:translate(17px,10px);
-ms-transform:translate(17px,10px);
-moz-transform:translate(17px,10px);
-webkit-transform:translate(17px,10px);
-o-transform:translate(17px,10px);
Значение translate(50px,100px) передвигает элемент 50 пикселей слева, и 100 пикселей сверху.
метод ROTATE()
С помощью метода rotate() , элемент вращается по часовой стрелке с данным углом. Отрицательные значения разрешены и поворачивают элемент против часовой стрелки.
Пример (синтаксис стиля)
transform: transl ate(7deg);
-ms-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-o-transform: rotate(7deg);
Значение rotate(30deg) вращает элемент по часовой стрелке на 30 градусов.
метод SCALE()
С помощью метода scale() , элемент увеличивает или уменьшает размер, в зависимости от параметров, приведенных для ширины (X-ось) и высоты (Y-ось):
Пример (синтаксис стиля)
transform: scale(1.2);
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
Значение scale(1.2) увеличит блок прямопропорционально в 1.2 раза. К примеру, з начение scale(2,4) увелививает ширину в два раза от своего первоначального размера, а высоту в 4 раза от первоначального размера.
метод SKEW()
С помощью метода skew() , элемент поворачивается с данным углом, в зависимости от параметров, приведенных для горизонтальной (X-ось) и вертикальной (Y-ось) линии:
Пример (синтаксис стиля)
transform: skew(40deg,20deg);
-ms-transform: skew(40deg,20deg);
-moz-transform: skew(40deg,20deg);
-webkit-transform: skew(40deg,20deg);
-o-transform: skew(40deg,20deg);
Значение skew(30deg,20deg) поворачивает элемент 30 градусов вокруг оси X, и 20 градусов вокруг оси Y.
метод MATRIX()
Метод matrix() объединяет все методы 2D трансформации в один.
Метод matrix получает 6 параметров, содержащих математические функции, которые позволяют: вращать, масштабировать, перемещать и искажать элементы.
Пример (синтаксис стиля)
transform: matrix(0.866,0.5,-0.7,0.866,0,0);
-ms-transform: matrix(0.866,0.5,-0.7,0.866,0,0);
-moz-transform: matrix(0.866,0.5,-0.7,0.866,0,0);
-webkit-transform: matrix(0.866,0.5,-0.7,0.866,0,0);
-o-transform: matrix(0.866,0.5,-0.7,0.866,0,0);
Заключение
2d трансформация – уникальный способ разместить элементы на странице в 2d плоскости. Главное, при применении таких эффектов не перестараться, чтобы не навредить дизайну. Используя эти и другие методы CSS 3 разумно и в нужных местах сайта, вы с гордостью можете сказать, что владеете самыми новыми стандартами языка описания внешнего вида web-страницы.