CSS3 Трансформации
CSS3 преобразования позволяют переводить, поворачивать, масштабировать и искажать элементы.
Трансформация это эффект, который позволяет изменить форму в элемент, размер и положение.
CSS3 поддерживает 2D и 3D преобразования.
Наведите курсор мыши на указанные ниже элементы, чтобы увидеть разницу между 2D и 3D-преобразования:
Поддержка браузеров для 2D Преобразований
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
Числа следуют -ms-, -webkit-, -moz- или -o- specify первую версию , которая работала с приставкой.
| Имущество | |||||
|---|---|---|---|---|---|
| transform | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
| transform-origin (two-value syntax) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
CSS3 2D Трансформации
В этой главе вы узнаете о следующих 2D методов преобразования:
-
translate() -
rotate() -
scale() -
skewX() -
skewY() -
matrix()
 | Совет: Вы узнаете о 3D - преобразований в следующей главе. |
|---|
translate() Метод
translate() метод перемещает элемент из текущей позиции ( в соответствии с заданными параметрами для оси Х и оси Y.).
Следующий пример перемещает <div> элемент 50 пикселов вправо и 100 пикселей вниз от текущей позиции:
пример
div
{
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px);
}
Попробуй сам " rotate() Метод
rotate() метод поворачивает элемент по часовой стрелке или против часовой стрелки в соответствии с заданной степенью.
Следующий пример поворачивает <div> элемент по часовой стрелке с 20 градусов:
пример
div
{
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
Попробуй сам " Используя отрицательные значения будет вращать элемент против часовой стрелки.
Следующий пример поворачивает <div> элемента против часовой стрелки с 20 градусов:
пример
div
{
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}
Попробуй сам " scale() Метод
В scale() метод увеличивает или уменьшает размер элемента ( в соответствии с заданными параметрами для ширины и высоты).
Следующий пример увеличивает <div> элемент в два раза его первоначальной ширины, и три раза его первоначальной высоты:
пример
div
{
-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3);
}
Попробуй сам " Следующий пример уменьшает <div> элемент будет половину своей первоначальной ширины и высоты:
пример
div
{
-ms-transform: scale(0.5,0.5); /* IE 9 */
-webkit-transform: scale(0.5,0.5); /* Safari */
transform: scale(0.5,0.5);
}
Попробуй сам " skewX() Метод
skewX() метод перекосы элемент вдоль оси Х по данным углом.
Следующий пример наклоняются <div> элемент 20 градусов вдоль оси Х:
пример
div
{
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}
Попробуй сам " skewY() Метод
skewY() метод перекосы элемент вдоль оси ординат по данным углом.
Следующий пример наклоняются <div> элемент 20 градусов вдоль оси ординат:
пример
div
{
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}
Попробуй сам " skew() Метод
skew() метод перекосы элемент вдоль X и Y оси по заданным углам.
Следующий пример наклоняются <div> элемент 20 градусов вдоль оси Х и 10 градусов вдоль оси ординат:
пример
div
{
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}
Попробуй сам " Если второй параметр не указан, то он имеет нулевое значение. Таким образом, следующий пример наклоняются <div> элемент 20 градусов вдоль оси Х:
пример
div
{
-ms-transform: skew(20deg); /* IE 9 */
-webkit-transform: skew(20deg); /* Safari */
transform: skew(20deg);
}
Попробуй сам " matrix() Метод
matrix() метод сочетает в себе все 2D преобразования методов в одно целое.
matrix() метод принимать шесть параметров, содержащий математические функции, что позволяет вам вращать, масштабировать, перемещать (транслирование), и косых элементов.
Параметры являются следующие: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) :
пример
div
{
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
Попробуй сам " Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»
CSS3 Transform Properties
В следующей таблице перечислены все 2D преобразования свойства:
| Имущество | Описание |
|---|---|
| transform | Применяет 2D или 3D трансформацию к элементу |
| transform-origin | Позволяет изменить положение на трансформированных элементов |
2D Transform Методы
| функция | Описание |
|---|---|
| matrix(n,n,n,n,n,n) | Определяет 2D преобразование, используя матрицу из шести значений |
| translate(x,y) | Определяет 2D перевод, перемещение элемента вдоль Х- и Y-оси |
| translateX(n) | Определяет 2D перевод, перемещение элемента вдоль оси Х |
| translateY(n) | Определяет 2D перевод, перемещение элемента вдоль оси Y. |
| scale(x,y) | Определяет 2D масштабное преобразование, изменение элементов ширина и высота |
| scaleX(n) | Определяет 2D масштабное преобразование, изменение ширины элемента |
| scaleY(n) | Определяет 2D масштабное преобразование, изменение высоты элемента |
| rotate(angle) | Определяет вращение 2D, угол задается в параметре |
| skew(x-angle,y-angle) | Определяет 2D трансформацию перекоса вдоль Х- и Y-оси |
| skewX(angle) | Определяет 2D преобразование перекоса вдоль оси Х |
| skewY(angle) | Определяет 2D преобразование перекоса вдоль оси Y. |