Свойство transform

Вам может понравиться

Трансформация объектов доступна в таких дизайнерских программах, как Adobe Photoshop или Adobe Illustrator, причем существует в них в незапамятных времен. Как css-свойство transform появилось только в версии CSS3, и сразу же пришлось многим верстальщикам «по сердцу», особенно в паре со свойством transition, позволяющим назначать анимацию средствами css.

Свойство transform

CSS-свойство transform подразумевает использование одной или нескольких функций:

Масштабирование элемента — функция scale()

По умолчанию функция scale()  имеет значение 1, т.е. transform: scale(1) — это нормальное состояние любого элемента. Поэтому при масштабировании объект обычно либо увеличивают scale(1.5) , либо уменьшают scale(.5). Со значением -1 вы получите зеркальное отражение, причем по обеим осям.

Если масштабирование необходимо выполнить по одной из осей, можно использовать функцию scaleX(значение) или scaleY(значение):

Можно масштабировать элемент с разными пропорциями по оси X и Y сразу, указывая 2 значения через запятую в скобках:

  transform: scale(1.2,1.6);

Также часто применяют масштабирование элементов вместе с анимацией (так называемые hover-эффекты, или эффекты при наведении):

  transition: transform .7s;

Как это выглядит на практике можно посмотреть в примере ниже:

See the Pen CSS Transform by Elen (@ambassador) on CodePen.18892

Поворот rotate()

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

  • В градусах (deg). Наиболее часто используемая единица измерения. Полный круг равен 360deg.
  • В градах (grad). Полный круг равен 400grad,
  • В радианах (rad). Полный круг равен 2π или примерно 6.2832rad.
  • В поворотах (turn). Один круг равен одному повороту и пишется как 1turn. Отлично используется для анимации.

В коде использование этой функции будет выглядеть так:

  transform: rotate(45deg);  transform: rotate(-.1turn);  transform: rotateX(60deg);  transform: rotateY(60grad);  transition: transform 1s;  transform: rotateY(1turn);

Посмотреть примеры:

See the Pen CSS-property transform: rotate() by Elen (@ambassador) on CodePen.dark

Обратите внимание на последний пример: при повороте текст элемента поворачивается в ту же сторону, что и сам элемент. Если же текст нужно «вернуть на место», то для вложенного элемента нужно задать такой же угол поворота, но с отрицательным значением:

  transform: rotate(45deg);  transform: rotate(-45deg);Text

Скос элемента — функция skew()

В градусах (deg), градах (grad) или радианах (rad) также измеряется и скос, или искажение сторон, элемента. За это преобразование отвечает функция skew():

Варианты использования функции skew()

Как видно из кода, вы можете задать скос (или наклон) элемента либо одной цифрой (он будет выполнен по по оси X), либо двумя (первая — по оси X, вторая — по оси Y), или задать явно, по какой оси нужен скос, используя функции skewX или skewY.

Наглядная демонстрация использования трансформации скоса (наклона) в примере:

See the Pen CSS transform: skew() by Elen (@ambassador) on CodePen.dark

Смещение translate()

Очень удобное свойство, которое позволяет смещать элементы, которые не позиционированы абсолютно или относительно. В качестве аргументов можно указывать число в %, px, em, rem и т.п., причем как положительные, так и отрицательные. В случае использования % величина смещения берется от ширины или высоты элемента.

При использовании функции translate() с одним параметром смещение будет происходить по горизонтали (вправо — при положительных значениях, влево — при отрицательных значениях).

Можно указать 2 параметра — тогда смещение будет и по горизонтали, и по вертикали одновременно.

Обратите внимание

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

  transform: translate(-45px);  transform: translate(20%, 20%);  transform: translateX(2em);  transform: translateY(3rem);  transition: transform .7s;  transform: translate(3rem, 2em);

See the Pen CSS-property transform: translate() by Elen (@ambassador) on CodePen.dark

Комбинация функций в свойстве transform

Достаточно часто приходится комбинировать 2 или 3 функции свойства transform. В этом случае следует указывать функции в свойстве transform через пробел, а не писать их несколько друг под другом.

несколько функций в свойстве transform

transform: scale(1.5) rotate(90deg) translateY(-50px);transform: translateY(-50px) rotate(90deg) scale(1.5) ;transform: scale(1.5);/* неверно, выпонится только последняя трансформация */transform: rotate(90deg); /* неверно, выпонится только последняя трансформация */transform: translateY(-50px);

See the Pen CSS transform: several functions by Elen (@ambassador) on CodePen.dark

Обратите внимание, что в зависимости от того, в какой последовательности перечислены свойства, эффект трансформации, возникающий при наведении, может быть разным.

Альтернативой указанию нескольких свойств служит функция matrix().

Функция matrix()

Функция matrix() предполагает использование 6 коэффициентов, т.е. чисел без указания единиц измерения вроде %, px, em, deg и т.п. внутри круглых скобок: transform: matrix(a, b, c, d, tx, ty). По умолчанию элемент имеет такие значения этого свойства:

.elem { transform: matrix(1, 0, 0, 1, 0, 0); }

Матрица смещения

Значения tx и ty — значения, на которые должно быть сдвинуто начало координат. Мы также можем представить это с помощью вектора [1 0 0 1 tx ty]. Вместо tx, ty необходимо подставить значения.

  transform: matrix(1, 0, 0, 1, 80, 80);  /*аналогично свойству transform: translate(80px,80px); */

Матрица масштабирования

За масштабирование по X отвечает первый коэффициент a, за масштабирование по Y — 4-ый коэффициент d. Поэтому при изменении этих цифр, произойдет изменение масштаба по горизонтальной и вертикальной осям:

  transform: matrix(.7, 0, 0, 2, 0, 0);  /*аналогично свойству transform: scale(.7, 2); */

Матрица наклона

За наклон отвечают коэффициенты b и c, которые и влияют на вид элемента.

  transform: matrix(1, 0, -0.5, 1, 0, 0);  /* аналог — свойство skew */  /* transform: skew(-30deg);*/

Матрица поворота

Поворот определяется в виде косинусов и синусов в первых 4-х коэффициентах. Например, поворот против часовой стрелки на 45 градусов будет выражен следующим кодом:

  transform: matrix(.71, -.71,.71, 0.71, 0, 0);  /* аналог — функция rotate() */  /* transform: rotate(-45deg); */

Посмотреть на примерах:

See the Pen CSS transform: matrix() by Elen (@ambassador) on CodePen.dark

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

Почитать о матрицах:

Центр трансформации

По умолчанию все трансформации элемента происходят относительно точки, расположенной в его центре. Собственно, также это происходит и в Photoshop, и в Illustrator. Но если в графических программах эту точку можно переместить визуально, то в css-свойствах за ее положение отвечает transform-origin:

transform-origin: center;transform-origin: 50% 50%;transform-origin: 20px 100px;transform-origin: 3em 1.2rem;transform-origin: 35px 2em;

Значение этого свойства по умолчанию: center, или 50% 50%. Задание в свойстве transform-origin: 20px 100px; например, помещает начало координат в 20 пикселей от левого края объекта и в 100 пикселей от его верха. Трансформации каждой точки в локальной системе координат объекта рассчитываются относительно этого центра.

Вы можете задавать координаты центр трансформации с помощью ключевых слов:

  • по горизонтали: left, center, right
  • по вертикали: top, center, bottom

Посмотрите на разницу в отображении трансформации относительно точки трансформации, которая расположена в различных координатах:

See the Pen CSS property transform-origin by Elen (@ambassador) on CodePen.dark

Практический пример использования трансформаций и hover-эффектов

Очень часто свойство transform используется для создания анимационных эффектов при наведении на элемент в сочетании со свойством transition.

  Ниже приведен пример, в котором при наведении на блок с текстом и картинкой происходит небольшое смещение этого блока вниз (transform: translateY(10px)) и увеличение картинки с небольшим ее поворотом (transform: scale(1.3) rotate(-7deg)):

  transition: transform .7s;  transform: scale(1.3) rotate(-7deg);  box-shadow: 0 3px 20px rgba(0,0,0,.6);  transform: translateY(10px);

Все стили вы можете посмотреть на вкладке CSS, а разметку — на вкладке HTML. Для того чтобы поворот картинки не был заметен, она помещена в div-обертку, для которого назначено свойство overflow: hidden. Поэтому все, что выходит за пределы этого div-а, обрезается.

See the Pen CSS transition and transform by Elen (@ambassador) on CodePen.18892

Источник: http://html-plus.in.ua/css-property-transform/

Свойство transform-origin

Мне кажется, что статья местами непонятна (слишком объемное свойство). Если вы не понимаете некоторые описанные вещи — напишите мне, я постараюсь описать их более понятно (контакты внизу страницы).

Свойство transform-origin задает точку, относительно которой будут происходить трансформации элемента, задаваемые свойством transform.

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

Синтаксис

Значения по осям Y и Z не являются обязательными, можно их опускать (они примут значения по умолчанию).

Сдвиг точки по оси Z нужен для 3D трансформаций (см. видео ниже).

селектор { transform-origin: X-ось Y-ось Z-ось | inherit;
}селектор { Значения Y-ось: left | center | right | CSS единицы | %;
}селектор { Значения для Y-ось: top | center | bottom | CSS единицы | %;
}селектор { Значения для Z-ось: CSS единицы | %;
}

Значения по горизонтали (ось X)

ЗначениеОписание
CSS единицы Значение в заданных CSS единицах, которое задает отступ центра трансформации от левой границы элемента. Положительное значение сдвигает центр трансформации вправо (вовнутрь элемента), а отрицательное — влево (снаружу элемента) относительно левой границы элемента.
Проценты Центр трансформации отступает от левой границы элемента на процент от ширины элемента. Положительное значение сдвигает центр трансформации вправо (вовнутрь элемента), а отрицательное — влево (снаружу элемента) относительно левой границы элемента.
left Точка вращения по горизонтали на левой границе элемента (где именно — задает значение по оси Y).
right Точка вращения по горизонтали на правой границе элемента.
center Точка вращения по горизонтали в центре элемента.

Значения по вертикали (ось Y)

ЗначениеОписание
CSS единицы Значение в заданных CSS единицах, которое задает отступ центра трансформации от верхней границы элемента. Положительное значение сдвигает центр трансформации вниз (вовнутрь элемента), а отрицательное — вверх (снаружу элемента) относительно верхней границы элемента.
Проценты Центр трансформации отступает от верхней границы элемента на процент от высоты элемента. Положительное значение сдвигает центр трансформации вниз (вовнутрь элемента), а отрицательное — вверх (снаружу элемента) относительно верхней границы элемента.
top Точка вращения по вертикали на верхней границе элемента (где именно — задает значение по оси X).
bottom Точка вращения по вертикали на нижней границе элемента.
center Точка вращения по вертикали в центре элемента.

Значения по оси Z

ЗначениеОписание
CSS единицы Значение в заданных CSS единицах, которое задает отступ центра трансформации от плоскости элемента. Положительное значение сдвигает его на нас (от плоскости экрана), а отрицательное от нас (не проверено).
Проценты Центр трансформации отступает на заданный процент (от чего?).
Читайте также:  Знакомство с html

Значение по умолчанию: center center 0px.

Значение inherit — наследует значение родителя.

Примеры

Пример

Наведите мышкой на пример — блок повернется на 30 градусов по часовой стрелке относительно своего центра:

p { border: 1px solid black; width: 100px; height: 50px;
}
p:hover { -o-transform: rotate(30deg); -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg);
}

Пример

А теперь при наведении блок повернется относительно верхнего левого угла:

p { border: 1px solid black; width: 100px; height: 50px;
}
p:hover { transform-origin: 0px 0px; -o-transform: rotate(30deg); -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg);
}

Пример

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

p { border: 1px solid black; width: 100px; height: 50px;
}
p:hover { transform-origin: 100% 100%; -o-transform: rotate(30deg); -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg);
}

Пример

Повернем блок относительно правого верхнего угла:

p { border: 1px solid black; width: 100px; height: 50px;
}
p:hover { transform-origin: 100% 0%; -o-transform: rotate(30deg); -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg);
}

Пример

Повернем блок относительно центра левой стороны. Для этого для оси X зададим «left» (точка вращения будет слева), а для оси Y — «center» (точка вращения будет по центру по вертикали):

p { border: 1px solid black; width: 100px; height: 50px;
}
p:hover { transform-origin: left center; -o-transform: rotate(30deg); -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg);
}

Пример

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

p { border: 1px solid black; width: 100px; height: 50px;
}
p:hover { transform-origin: left center; -o-transform: scale(1.5); -ms-transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); transform: scale(1.5);
}

left center

center center

right center

нижний правый угол

нижний левый угол

Пример

Наведите мышкой на пример — блок повернется на 30 градусов по часовой стрелке относительно центра транформации, который находится на 50% от ширины элемента (это значит 100px*50%=50px) слева от его левой границы (так как задано отрицательное значение). По вертикали центр трансформации находится по центру элемента, так как задано значение center. В примере задано свойство transition, чтобы сделать плавный поворот:

p { border: 1px solid black; width: 100px; height: 50px; -moz-transition: transform 1s; -webkit-transition: transform 1s; transition: transform 1s; transform-origin: -50% center;
}
p:hover { -o-transform: rotate(30deg); -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg);
}

Источник: http://code.mu/css/transform-origin.html

CSS свойство transform

Свойство transform применяет к элементу 2D или 3D трансформацию. Оно позволяет смещать, вращать, масштабировать и/или наклонять любой элемент на странице.

В качестве значения свойства transform выступает одна или несколько функций трансформации (разделяемых пробелами), которые будут применятся в том порядке, в котором они определены.

CSS синтаксис

transform: none | функция трансформации | initial | inherit;

Возможные значения

ЗначениеОписание
none Трансформация не применяется.
matrix(n,n,n,n,n,n) Применяет 2D трансформцию с помощью матрицы из шести значений.
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Применяет 3D трансформацию с помощью матрицы из шестнадцати (4х4) значений.
translate(x,y) Функция translate позволяет перемещать элементы влево, вправо, вверх или вниз. Эта функция аналогична поведению свойства «position: relative;«. При использовании этой функции, можно сдвигать элементы не влияя на поток документа.
translate3d(x,y,z) Применяет 3D смещение.
translateX(x) Применяет смещение, только по оси Х.
translateY(y) Применяет смещение, только по оси Y.
translateZ(z) Применяет смещение, только по оси Z.
scale(x,y) Функция scale масштабирует элемент горизонтально и вертикально. Если указано только одно значение, оно будет использовано сразу и для горизонтального масштабирования и для вертикального. Например, scale(1) оставит элемент такого же размера, scale(2) удвоит его пропорции, scale(0,5) уменьшит элемент в 2 раза. Предоставление различных значений будет искажать элемент.По умолчанию масштабируемый элемент будет увеличиваться от своего центра или уменьшаться к нему, другими словами центр элемента будет всегда находится в одной и той же точке, не зависимо от его размера. Чтобы изменить поведение по умолчанию нужно воспользоваться свойством transform-origin.
scale3d(x,y,z) Применяет 3D масштабирование.
scaleX(x) Применяет масштабирование по оси Х.
scaleY(y) Применяет масштабирование по оси Y.
scaleZ(z) Применяет масштабирование по оси Z.
rotate(угол) Функция rotate поворачивает элемент вокруг точки происхождения по заданному значению угла. Как и в случае с функцией scale, по умолчанию точка происхождения — это центр элемента.
rotate3d(x,y,z,угол) Применяет 3D поворот.
rotateX(угол) Применяет 3D поворот по оси Х.
rotateY(угол) Применяет 3D поворот по оси Y.
rotateZ(угол) Применяет 3D поворот по оси Z.
skew(x-угол,y-угол) Функция skew определяет наклон по осям X и Y. Если второй параметр опущен, то наклон элемента произойдёт только по оси X.
skewX(угол) Применяет 2D наклон по оси Х.
skewY(угол) Применяет 2D наклон по оси Y.
perspective(n) Задает перспективу для преобразования 3D элемента.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Развернуть элемент<\p>
div { -ms-transform: rotate(7deg); /* IE 9 */ -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */ transform: rotate(7deg);
}<\p>

Источник: https://msiter.ru/references/css-reference/transform

transform

12.0+ 10.0+ 16.0+ 36.0+ 23.0+ 9.0+

CSS свойство transform применяет 2D или 3D преобразование к элементу. Оно позволяет смещать, вращать, масштабировать и/или наклонять любой элемент на странице.

С помощью функций преобразования можно манипулировать внешним видом элемента. В качестве значения свойства transform выступает одна или несколько функций (разделяемых пробелами), которые будут применяться в том порядке, в котором они определены.

Значение по умолчанию:

Применяется:

Анимируется:

Наследуется:

Версия:

Синтаксис JavaScript:

none
к трансформируемым элементам
да
нет
CSS3
object.style.transform=»rotate(7deg)»

Синтаксис

transform: none|transform-functions|inherit;

Значения свойства

ЗначениеОписание
none Преобразование не применяется.
matrix(n,n,n,n,n,n) Применяет 2D преобразование с помощью матрицы из шести значений.
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Применяет 3D преобразование с помощью матрицы из шестнадцати(4х4) значений.
translate(x,y) Функция translate позволяет перемещать элементы влево, вправо, вверх или вниз. Эта функция аналогична поведению position: relative; При использовании этой функции, можно сдвигать элементы не влияя на поток документа.
translate3d(x,y,z) Применяет 3D смещение.
translateX(x) Определяет смещение, только по оси Х.
translateY(y) Определяет смещение, только по оси У.
translateZ(z) Определяет 3D смещение, только по оси Z.
scale(x,y) Функция scale(x,y) масштабирует элемент горизонтально и вертикально. Если указано только одно значение, оно будет использовано сразу и для горизонтального масштабирования и для вертикального. Например, scale(1) оставит элемент такого же размера, scale(2) удвоит его пропорции, scale(0.5) уменьшит элемент в 2 раза и так далее. Предоставление различных значений будет искажать элемент.Масштабируемый элемент будет увеличиваться от своего центра или уменьшаться к нему, другими словами центр элемента будет всегда находится в одной и той же точке, не зависимо от его размера. Таково поведение элемента по умолчанию, чтобы изменить это можно воспользоваться свойством transform-origin.
scale3d(x,y,z) Применяет 3D преобразование масштаба.
scaleX(x) Определяет преобразование масштаба по оси Х.
scaleY(y) Определяет преобразование масштаба по оси У.
scaleZ(z) Определяет 3D преобразование масштаба по оси Z.
rotate(angle) Функция rotate() поворачивает элемент вокруг точки происхождения по заданному значению угла. Как и в случае с функцией scale(), по умолчанию точка происхождения — это центр элемента.
rotate3d(x,y,z,angle) Определяет 3D поворот.
rotateX(angle) Определяет 3D поворот вдоль оси Х.
rotateY(angle) Определяет 3D поворот вдоль оси У.
rotateZ(angle) Определяет 3D поворот вдоль оси Z.
skew(x, y) Функция skew(x, y) определяет наклон по осям X и Y. Как и следовало ожидать, x определяет наклон оси X,а y определяет наклон оси Y. Если второй параметр опущен, то перекос элемента произойдёт только по оси X.
skewX(angle) Определяет 2D преобразование наклона вдоль оси Х.
skewY(angle) Определяет 2D преобразование наклона вдоль оси У.
perspective(n) Определяет перспективу для преобразования 3D элемента.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

Демонстрация работы свойтсва transform.

#myDIV { background-color: lightblue;

transform: rotate(10deg);

}

Источник: https://puzzleweb.ru/css/pr_transform.php

Функции Transform

translateX(10px) — сдвиг по оси X. Значения в пикселях или процентах.

translateY(10px) — сдвиг по оси Y.

translate(25px, 30%) — сдвиг по осям X и Y. Если задано одно значение, оно используется как сдвиг по X, второе значение при этом равно 0.

scaleX(2) — масштабирование по оси X. При этом 1 — это 100%.

scaleY(2) — масштабирование по оси Y.

scale(.5, 2) — масштабирование по осям X и Y. Если второе значение не задано, оно будет равно первому.

rotate(10deg) — поворот на заданный угол. Значения задаются в градусах (deg). Центр поворота определяется свойством transform-origin.

skewX(20deg) — наклон по оси X. Значения задаются в градусах (deg).

skewY(20deg) — наклон по оси Y.

skew(5deg, -20deg) — наклон по осям X и Y. Если задано одно значение, второе будет равно 0.

Примеры трансформаций:

matrix(w, sky, skx, h, mx, my)

Описывает трансформацию элемента в двухмерном пространстве. С помощью матрицы можно задать все предыдущие свойства сразу, кроме поворота.

Значения:

w — изменение ширины. 1 — исходная ширина.

sky — наклон по вертикали. 0 — без наклона.

skx — наклон по горизонтали. 0 — без наклона.

h — изменение высоты. 1 — исходная высота.

mx — сдвиг по горизонтали.

my — сдвиг по вертикали.

Исходный код для элемента без трансформации:

transform: matrix(1, 0, 0, 1, 0, 0);

Примеры матричных трансформаций:

transform: matrix(-.01,0,0,-.01,0,-125);

3D

translateX(20px), translateY(15px), translateZ(-10px) — сдвиг элемента по одной из осей.

translate3d(20px, 15px, -10px) — сдвиг элемента по трем осям сразу. Последовательность значений: X, Y, Z.

scaleX(2.5), scaleY(.4), scaleZ(1.7) — изменение масштаба по одной из осей.

scale3d(2.5, .4, 1.7) — изменение масштаба по трем осям сразу.

rotateX(30deg) или rotate3d(1, 0, 0, 30deg) — поворот по оси X.

rotateY(40deg) или rotate3d(0, 1, 0, 40deg) — поворот по оси Y.

rotateZ(50deg) или rotate3d(0, 0, 1, 50deg) — поворот по оси Z.

rotate3d(1, 1, 1, 90deg) — поворот по всем осям.

perspective(100px) — определяет глубину сцены. Чем меньше значение, тем больше вытянута сцена по отношению к зрителю.

Читайте также:  Как проверить текст на уникальность

matrix3d(num, num, num, num, num, num, num, num, num, num, num, num, num, num, num, num)

Важно

Значения матрицы мне не удалось выяснить до конца, кроме того, что первые три значения нижнего ряда отвечают за центр трансформации, а весь последний столбец — за перспективу. Причем первые три за перспективы по конкретным осям, а последняя — общая.

Ссылки по теме matrix3d():w3.org/TR/css3-transforms/#mathematical-descriptioneleqtriq.com/2010/05/css-3d-matrix-transformations/developer.mozilla.org/en-US/docs/Web/CSS/transform-function

Источник: http://css.yoksel.ru/pages/transform-functions/

Свойство CSS 3 transform

Приветствую, уважаемые товарищи.

Сегодня анализу подвергнется ещё одно свойство из CSS 3 — transform — то-бишь транформирование, или преобразование, если угодно. С его помощью можно изменять масштаб контейнера, наклонять и даже вращать элементы. Только, в противовес какому-нибудь width:50%, манипуляция производится над всем элементом, включая его содержимое.

Здорово, правда?

Вся суть преобразований сводится к «матричному колдунству». Вырожденная матрица 3×3 имеет вид:

a c e b d f 0 0 1

Где a и d отвечают за горизонтальное и вертикальное масштабирование, b и c — наклоны по осям, e и f — смещения. Это базовая матрица, все преобразования обсчитываются на её основе.

Если интересно, почему именно так, смотрите информацию на офсайте.

Для использования CSS свойста пишем что-то вроде:

transform: функция1 [функция2 …];

Функции рассмотрим чуть ниже, прежде же необходимо знать про ещё одно свойство:

transform-origin: x y

Где x и y — координаты точки (отсчитывается от левого верхнего угла элемента), относительно которой производятся преобразования. В качестве значений подходят единицы измерения CSS: px, em и т. д.

Можно использовать проценты. Имеются ключевые слова: left, center, right для x (расположить точку слева, по центру или справа); top, center, bottom для y (вверху, по центру или внизу).

Позиция по умолчанию:

transform-origin: 50% 50%

Это означает, что все преобразования будут происходить относительно центра элемента.

Совет

На самом деле, общий код функции содержит ещё одну, третью, переменную — z. Это может натолкнуть на мысль, что трансформации применимы к трём измерениям. Мысль верна. Применив функцию perspective для свойства transform, можно задать расстояние между «глазами» пользователя и элементом. Более подробно о 3D поговорим, скорее всего, в одной из следующих статей.

Переходим к самому интересному. Как и в случае transition, здесь используется одна универсальная функция, на основе которой базируются остальные.

matrix

Функция представлена в виде matrix(a, b, c, d, e, f). Что обозначает каждое значение написано чуть выше. Чтобы было понятно, общий код:

transform: matrix(2, 0, 0, 1, 0, 0);

Элемент, к которому применяется трансформация, будет в 2 раза шире исходного размера.

Визуальная составляющая поможет получить исчерпывающую информацию о каждом из значений.

Теперь посмотрим, какие из функций предопределены.

rotate

Вращение элемента. В качестве значения задаётся угол поворота. Поддерживаются следующие угловые размеры:

  • deg — обычные градусы, полный оборот окружности составляется 360°;
  • rad — радианы, полный оборот окружности составляет 2π;
  • grad — грады, 1 град = 1/400 окружности, таким образом, 400 град составляют полный оборот окружности;
  • turn — оборот, т. е. 1turn = 360°.

Положительные значения вращают элемент по часовой стрелке, отрицательные — против.

Возможно вы, дорогой читатель, удивитесь, каким образом поворот связан с матрицей? Насколько помню, в школьной программе разговор об этом не предусмотрен, а сама область подобных преобразований относится к высшей математике и преподаётся в вузах. Поворот — сочетание наклонов и масштабирований, состоящих в строгом отношении друг относительно друга:

cos(α) -sin(α) 0 sin(α) cos(α) 0 0 0 1 transform: matrix(cos(α), sin(α), -sin(α), cos(α), 0, 0);

Удивлены? Представьте, что нужно повернуть элемент на 90°. Косинус этого угла равен нулю, синус — единице. Устанавливаем на форме значения масштабов в ноль, горизонтальный наклон — -1, вертикальный — 1. Получилось? 😉

В коде это выглядит так:

transform: matrix(0, 1, -1, 0, 0, 0);

либо так:

transform: rotate(90deg);

Второй вариант понятнее, но и первый знать просто полезно.

scale

Масштабирование. Значение по умолчанию — 1, т. е. оригинальный масштаб. Числа больше единицы приводит к увеличению элемента, меньше единицы — к уменьшению.

Отрицательные значение работают аналогично, только зеркально «отражают» элемент. Запись функции: scale(scX, scY). Где scX и scY — численные значения.

Характерная особенность — при задании одного параметра масштабирование распределяется по горизонтали и вертикали.

Определены функции изменения масштаба по осям:

  • scaleX(scX) — масштабирование по ширине (ось X), аналогично scale(scX, 1);
  • scaleY(scY) — наклон по высоте (ось Y), аналогично scale(1, scaleY).

Масштабирование выполняется пропорционально, например, значение 2 ровно в 2 раза увеличит элемент, а 0.1 уменьшит в 10 раз.

Представление данной функции можно напрямую перенести в общий вид:

transform: matrix(scX, 0, 0, scY, 0, 0);

skew

Функция наклоняет элемент относительно осей. Общая запись: skew(angleX, angleY). Единицами измерений являются уже озвученные выше угловые величины. Имеются функция для задания наклонов по осям:

  • skewX(angleX) — наклон по оси X, аналогично skew(angleX);
  • skewY(angleY) — наклон по оси Y, аналогично skew(0, angleY).

В коде, с использованием matrix имеет вид:

transform: matrix(1, tan(angleX), tan(angleY), 1, 0, 0);

translate

Производит смещение элемента по осям X и Y. В качестве значений необходимо указывать поддерживаемые размерные единицы: px, em и пр. Есть функции для смещения по конкретным осям:

  • translateX(valX) — смещение по X, аналогично translate(valX);
  • translateY(valY) — смещение по Y, аналогично translate(0, valY).

Как несложно догадаться, вызов имеет вид:

transform: matrix(1, 0, 0, 1, valX, valY);

Положительные значения для X смещают элемент вправо, для Y — вниз. Отрицательные значения, соответственно, влево и вверх.

Прочие свойства и функции

Были рассмотрены лишь 2D эффекты. Но многие браузеры в полной мере поддерживают третье измерение. Можно работать с 3D (рассмотренные выше функции являются, по сути, частным случаем, который имеет место при «выбрасывании» одного измерения).

Можно задать поведение внутренник элементов (лежат ли они в одной плоскости с изменяемым, либо представлены в трёх измерениях); за это отвечает свойство transform-style, которое принимает значение flat (по умолчанию), либо preserve-3d (отображение вложенных элементов в 3D).

Для выполнение операций над элеменами в 3D имеются функции matrix3d() и perspective(). Возможно, в одной из следующих статей я придумаю интересный способ для объяснения работы с ними.

Сейчас же можно в полной мере оценить трансформирование элементов и даже создать на их основе вёрстку, которую раньше можно было сделать лишь с помощью точечного позиционирования и работой с фоновыми изображениями.

CSS 3 сделал огромный шаг вперёд. С одной стороны, это позволяет избавиться от всяких хаков и воплощать действительно сложные дизайны. С другой — довольно сильно усложнились стили, что делает полноценное использование, в большинстве случаев, недоступным для прозрачного использования большинством пользователей.

(Оценок пока нет)
Загрузка…

Источник: https://a-panov.ru/css-3-transform/

css анимация animation трансформация transform переходы transition примеры

Главная / HTML и CSS / Анимация, трансформация, переходы css

grigoriev

2825

В CSS 3 появились интересные свойства, с помощью которых можно задать переход трансформацию и анимацию для нужных нам элементов. Это очень удобно, так как не приходится использовать javascript. К минусу можно отнести кроссбраузерность. Не все браузеры поддерживают эти css 3 свойства.

Давайте приступим к рассмотрению данных свойств. Но для начала по традиции создадим стенд для теста. Это будет обыкновенная кнопка. Назовём её testbutton и зададим для неё свойство hover. При наведении на кнопку будет меняться цвет текста и положение.

Так как этот пост не о создании кнопок, описывать код не будем.

Сss переходы (transition)

И так наше первое свойство это transition. Что бы переход функционировал нужно выполнить следующие действия:

  • Задаём два стиля. Один стиль описывает текущее состояние элемента, другой состояние элемента после перехода css. Например текст на кнопке меняется с белого на чёрный.
  • Задаём для стиля, описывающего текущее состояние элемента свойство transition.
  • Задаём инициатор, который запускает переход из одного стиля в другой(например hover).

Свойства для обявления перехода:

— transition-property — свойство CSS, к которому мы приложим эффект transition. Можно назначить почти любое свойство (color, border и тд). Для применения перехода ко все свойствам используем all.

-transition-duration — временной интервал, в течении которого происходит переход. (0.5S, 1S, 1.6s)

-transition-timing-function — указывает как будет изменяться скорость перехода за установленный период времени. Может принимать значения:

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier

— transition-delay — устанавливает время задержки перед началом перехода.

Пример записи:

.button{ transition-property: all; transition-duration: 2s; transition-timing-function: ease; transition-delay: 0s; }

Сокращённая форма с браузерными префиксами и рабочий пример css transition:

.button{ -o-transition: all 2s ease 0s; -ms-transition: all 2s ease 0s; -moz-transition: all 2s ease 0s; -webkit-transition: all 2s ease 0s; transition: all 2s ease 0s; } .button:hover{ border: 3px solid #914B4B; color: #000000; text-shadow: 0px 2px #ccc; box-shadow: 2px 2px 10px 1px rgba(0,0,0, 0.5); }

Test button

transition: 2s

Css трансформация (transform)

Теперь давайте поговорим о трансформациях в css. Начинается описание этого свойства с слова transform. Производится следующая трансформация:

  • scale — увеличивает или уменьшает элемент
  • translate — двигает элемент в разных направлениях.
  • rotate — поворачивает элемент на разные углы.
  • skew — скашивает элемент по осям.

Применяются данные свойства например к псевдоклассу элемента hover. Синтаксис c учётом браузерных префиксов выглядит так:

.button:hover{ -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); }

В данном коде описано уменьшение кнопки в до 0.7 при наведении на неё курсора мыши. Аналогично пишется код и для других свойств трансформации. Примеры css transform:

scale — увеличивает или уменьшает элемент

scale(0.7)

scale(1.5)

scale(1.5, 1)

scale(1, 1.5)

translate — двигает элемент в разных направлениях.

translate(40px,0)

translate(0,-30px)

rotate — поворачивает элемент на разные углы.

rotate(70deg)

skew — скашивает элемент по осям.

skew(15deg,5deg)

transform-origin — меняет точку приложения трансформации

transform-origin: 20% 30%

У css анимации есть преимущество перед css трансформацией. Анимацию не надо запускать как трансформацию. Этим то css анимация нам и интересна. Она может запускаться например при загрузке страницы. Для создания анимации нам нужно сделать несколько действий:

  • определяем кадры анимации (keyframes)
  • назначаем нашу анимацию для нужных нам элементов страницы.

Определяем кадры анимации (keyframes). Синтаксис:

@keyframes название анимации { from { CSS-свойства } to { CSS-свойства } }

Пример:

@keyframes blink { from { box-shadow: 0 0 10px 0 rgba(237, 19, 19, 0.5); background: #913411; } 50%{ box-shadow: 0 0 10px 10px rgba(237, 19, 19, 0.5); background: #D52B0F; } to{ box-shadow: 0 0 10px 0 rgba(237, 19, 19, 0.5); background: #913411; } }

Читайте также:  Как накрутить счетчик посещений на сайте

В данном примере происходит изменение в середине css animation. Увеличивается радиус тени и меняется цвет фона. К концу анимации всё возвращается к начальным значениям.

Так же в данном примере мы не описали кадры анимации для других браузеров.

В боевом коде у нас будет присутствовать такой же код только отдельно для каждого браузерного префикса(@-webkit-keyframes, @-o-keyframes, @-moz-keyframes).

И вот мы создали кадры анимации. Давайте их теперь применим к нашей кнопке class=»button». Так же анимацию можно прикрутить и к псевдоклассам (:hover, :focus и тд). Свойства почти такие же что и в переходах. Опишем включение нашей анимации с именем «blink» при наведении курсора мыши на кнопку.

Css анимация пример:

.button12:hover{ animation-name: blink; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; }

Сокращённая форма записи с учётом браузерных префиксов

.button12:hover{ animation: blink 1s linear infinite; -webkit-animation: blink 1s linear infinite; -moz-animation: blink 1s linear infinite; -o-animation: blink 1s linear infinite; }

Пример:

Анимация

Источник: http://aweb34.ru/html-and-css/animatsiya-transformatsiya-perekhody-css

Transform CSS: теория и примеры трансформации объектов :

Третья версия каскадных таблиц стилей привнесла новые свойства для объектов веб-страниц. Это возможность создавать блоки со сглаженными углами, настраивать тени, добавлять прозрачность и градиент, задавать анимацию.

О последнем стоит упомянуть подробнее. Если ранее для создания иллюзии движения на страницы добавляли gif-файлы, которые нужно было специально отрисовывать, то сейчас атрибут transform CSS выполняет все действия по анимации объектов автоматически.

Осталось научиться его использовать.

Особенности применения свойства

Обычно к трансформация объектов прибегают при наведении на них мышки. Она задаётся для псевдокласса с именем :hover. Изменения затрагивают только один элемент веб-страницы, не влияя на остальные.

Рассматриваемый параметр стилей часто путают с другим – text-transform. CSS чётко разграничивает эти атрибуты. Последний определяет стиль написания текста и применяется только к абзацам веб-страницы, тогда как трансформация в чистом виде используется для всех элементов.

К любому объекту можно добавить:

  • перемещение вдоль прямой (горизонталь, вертикаль, диагональ);
  • поворот (частный случай – наклон);
  • масштабирование;
  • комбинацию перечисленных эффектов.

Кроме иллюзии движения трёх видов, свойство позволяет задать отражение, сдвиг и перспективу. Для продвинутых параметр задаётся в форме матрицы.

Трансформация выполняется относительно центра элемента. При необходимости точка отсчёта смещается. Параметр transform-origin: a b c смещает центр объекта относительно трёхмерной системы координат xyz.

Движение по горизонтали

Простейший вид перемещения – по горизонтали, то есть влево-вправо или вдоль оси x. Для его задания применяют значение свойства translate(x,y).

Поскольку элемент должен перемещаться только в одном направлении, координата y устанавливается y=0. А вот x-координате нужно назначить конкретную величину в пикселях, на которую объект должен быть сдвинут. Отрицательное значение – движение влево, положительное – вправо.

Но простое указание transform CSS не создаст иллюзию движения. Решение – добавить к описанию объекта атрибут transition. Рабочий пример для смещения элемента вправо на 125 пикселей показан ниже.

Строчка кода transition: all 2s ease-in-out означает:

  • all – установленное значение применяется ко всем параметрам объекта;
  • 2s – длительность эффекта 2 секунды;
  • ease-in-out – медленное движение в начале и в конце.

Перемещение вниз-вверх

Значение translate(x,y) используется, чтобы задать анимацию по вертикали. При этом координата x приравнивается к нулю, а y назначается величиной сдвига. Перемещение вверх – отрицательное значение, вниз – положительное.

Свойство transform CSS для класса up в примере ниже демонстрирует плавное перемещение объекта из точки с координатами (0; 0) на 80 пикселей вверх. Класс down задаёт противоположное направление движения – на 80 пикселей вниз.

Анимация в примере осуществляется с постоянной скоростью, на что указывает значение linear.

Диагональный ход

Если объединить рассмотренные перемещения, задаваемые transform, CSS-примеры для диагонального движения получаются просто.

В атрибуте устанавливаются значения для обеих координат. Расстояние смещения задаются пикселями. Куда будет двигаться объект – зависит от знаков. Возможны четыре варианта:

  • x, y положительные – движение вправо вниз;
  • x, y отрицательные – движение влево вверх;
  • x – положительное, y – отрицательное – движение вправо вверх;
  • x – отрицательное, y – положительное – движение влево вниз.

Разобраться с особенностями transform CSS поможет пример.

Если сдвиг по обеим осям выполняется на одинаковое количество пикселей (например, 32), достаточно указать одно число. То есть запись translate(32) соответствует translate(32, 32).

Вращение

После того как возможные способы перемещений рассмотрены, переходим к следующему виду трансформации – вращению. Поворот задаёт значение rotate(Xdeg), где X – градусы (от 0 до 360), на которые объект отклоняется от первоначального положения.

Осталось разобраться с направлением вращения. Вид поворота определяют знаки: плюс – по часовой стрелке, минус – против. При желании можно совместить оба вида поворота – смотрите пример ниже.

Изменение размера

Следующее значение добавляет масштабирование элемента: scale(a,b). Буквы в скобках – это ширина и высота объекта. Если требуется увеличить размер пропорционально в три раза, достаточно записать scale(3). Уменьшают габариты числа меньше единицы.

Запись атрибута transform CSS можно применить только к горизонтали – scaleX, или только к вертикали – scaleY. Интересные эффекты отражения и тени получатся в том случае, если будут заданы отрицательные значения для scaleY.

Трансформация текста

Новички путают рассмотренное свойство трансформации с атрибутом text-transform CSS. Напоминаем, данный параметр применяется только к тексту. С его помощью управляют регистром написания абзаца символов.

Например, после установки lowercase текст преобразуется в строчные буквы, uppercase – в прописные (аналогично нажатой клавише CapsLock на клавиатуре).

Чтобы слова начинались с большой буквы, свойству назначают capitalize.

В отличие от трансформации объектов, трансформация текста поддерживает механизм наследования. Преобразование символов назначают для классов, отвечающих за вывод заголовков, что на практике удобно, так как не требуется отслеживать способ записи. При любом варианте написания все блоки текста будут отображаться на веб-сайте одинаково.

Источник: https://www.syl.ru/article/305174/transform-css-teoriya-i-primeryi-transformatsii-obyektov

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

109

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

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

Поворот

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

Язык для промышленной разработки на платформе .NET Framework figure { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

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

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

Обратите внимание

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

Единицы измерения угла поворота CSS3-трансформации

Единица измеренияCSS3-обозначениеОписаниеПример
Градусы deg Угол полной окружности 360° rotate(90deg)
Грады grad Единица измерения плоских углов, равная 1/400 угла полной окружности или π/200 rotate(100grad)
Радианы rad 2π радиан равно углу полной окружности rotate(1.57rad)
Обороты turn 1 угол полной окружности равен одному обороту rotate(.25turn)

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

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

Источник: https://professorweb.ru/my/css/css_theory/level1/1_8.php

Ссылка на основную публикацию