CSS3 - трансформации

Веб-программирование --- CSS3 --- Трансформации

Когда мы изучали возможности HTML5 Canvas, то затронули возможность трансформаций — способов перемещения, масштабирования, наклона и вращения содержимого. На холсте трансформации можно использовать для изменения рисуемой на нем графики. А трансформации CSS3 служат для изменения внешнего вида элементов. Далее мы рассмотрим каждый вид CSS3-трансформаций.

Поворот

Трансформации CSS3 являются новой и экспериментальной возможностью. Поэтому при их использовании нужно указывать несколько версий свойства transform, каждую со своим префиксом разработчика браузеров. Далее приведен пример правила трансформации для вращения элемента со всем его содержимым:

<!-- HTML-разметка трансформируемого элемента -->
<figure>
      <img src="image.jpg" alt="C-Sharp" />
      <figcaption>Язык для промышленной разработки на платформе .NET Framework</figcaption>    
</figure>

figure {
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

В предыдущем примере с помощью свойства трансформаций transform задается функция rotate(), которая вращает элемент на 45° вокруг его центра:

Применение трансформации к какому-либо элементу страницы не влияет на другие ее элементы или ее компоновку. Например, если повернуть элемент, то он просто надвинется на смежные с ним элементы, как показано на рисунке выше.

Обратите внимание, что в предыдущем примере угол поворота задавался в градусах. Спецификация CSS3 предлагает возможность задавать угол и в других математических величинах:

Ниже показан пример правила таблицы стилей в котором используется такая же трансформация как и раньше, только с заданием другой единицы измерения:

figure {
	-moz-transform: rotate(0.125turn);
	-webkit-transform: rotate(0.125turn);
	-o-transform: rotate(0.125turn);
	-ms-transform: rotate(0.125turn);
	transform: rotate(0.125turn);
}

Масштабирование

Для использования анимации масштабирования используется функция scale(). Значение масштаба задается относительно единицы: scale(2) - исходный элемент будет увеличен в два раза, scale(0.5) - элемент уменьшается в два раза. Согласно этим правилам элемент масштабируется одинаково во все стороны, но вы можете задать направление: X - по горизонтали, Y - по вертикали, Z - глубина масштабирования.

Более того, функцию scale() можно использовать для создания эффекта отражения. Для этого нужно передать отрицательное значение в функцию scale(). Давайте рассмотрим некоторые примеры масштабирования. Для начала уменьшим нашу картинку с текстом в два раза:

figure {
	-moz-transform: scale(0.5);
	-webkit-transform: scale(0.5);
	-o-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
}

Теперь растянем элемент в два раза по оси X:

figure {
	-moz-transform: scaleX(2);
	-webkit-transform: scaleX(2);
	-o-transform: scaleX(2);
	-ms-transform: scaleX(2);
	transform: scaleX(2);
}

Как видите здесь уже используется функция scaleX(), которая масштабирует элемент относительно оси X. И наконец, используем эффект отражения:

figure {
	-moz-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-ms-transform: scaleX(-1);
	transform: scaleX(-1);
}

Перемещение

Для перемещения HTML-элемента используется функция translate(x,y), либо ее аналоги для конкретных осей translateX(x), translateY(y). Эти функции поддерживают отрицательные значения (сдвиг влево или вверх). Ниже показан пример использования трансформации перемещения:

figure {
	-moz-transform: translate(50px, -4em);
	-webkit-transform: translate(50px, -4em);
	-o-transform: translate(50px, -4em);
	-ms-transform: translate(50px, -4em);
	transform: translate(50px, -4em);
}

Искажение

Трансформация skew() искажает форму элемента. Например, возьмем правильный прямоугольник с закрепленным основанием. Если мы начнем толкать его верхнюю часть в сторону, то она сместится, в то время как основание останется на месте. В результате получим параллелограмм:

Значение искажения задается в градусах (можно указывать такие же единицы измерения, как и для трансформации поворота). Ниже показан пример использования трансформации искажения:

figure {
	-moz-transform: skewX(50grad);
	-webkit-transform: skewX(50grad);
	-o-transform: skewX(50grad);
	-ms-transform: skewX(50grad);
	transform: skewX(50grad);
}

Использование нескольких трансформаций

Вы можете объединить несколько трансформаций двумя способами: указать несколько трансформаций в одном правиле, разделив их пробелами или использовать матричную трансформацию (matrix transform), которая позволяет комбинировать несколькими трансформациями с помощью математической матрицы. Более подробно о матричной трансформации вы можете прочитать на сайте разработчиков браузера Opera - CSS Transforms Matrix, а ниже мы рассмотрим пример группирования нескольких трансформаций в одном правиле:

figure {
	-moz-transform: scale(1.5) translateX(10px) skew(10deg) rotate(0.175rad);
	-webkit-transform: scale(1.5) translateX(10px) skew(10deg) rotate(0.175rad);
	-o-transform: scale(1.5) translateX(10px) skew(10deg) rotate(0.175rad);
	-ms-transform: scale(1.5) translateX(10px) skew(10deg) rotate(0.175rad);
	transform: scale(1.5) translateX(10px) skew(10deg) rotate(0.175rad);
}

Сначала элемент увеличивается в полтора раза (используя трансформацию scale), потом перемещается на 10 пикселов влево (посредством трансформации translateX) и, наконец, наклоняется и поворачивается (используя трансформации skew и rotate).