Свойство transform


Оглавление (нажмите, чтобы открыть):

Свойство transform-origin

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

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

Синтаксис

Значения по осям Y и Z не являются обязательными, можно их опускать (они примут значения по умолчанию). Сдвиг точки по оси Z нужен для 3D трансформаций.

Значения для оси X

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

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

Значения для оси Y

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

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

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

Значение Описание
CSS единицы Значением служат любые единицы для размеров, которые задают отступ центра трансформации от плоскости элемента. Положительное значение сдвигает его на нас (от плоскости экрана), а отрицательное от нас.

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

Пример

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

Свойство transform

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

Элемент можно передвигать, масштабировать, поворачивать и наклонять.

Допустимые значения

  • none — элемент не трансформируется
  • — элемент трансформируется согласно одной из следующих функций:
    • matrix( , , , , , ) — определяет матрицу, на которую будет умножена матрица, составленная из исходных координат элемента для получения новых координат
    • matrix3d( , , , , , , , , , , , , , , , ) — определяет 3d матрицу, на которую будет умножена матрица, составленная из исходных координат элемента для получения новых координат
    • translate( ) — определяет сдвиг элемента. Можно задать два сдвига, через запятую: первый по оси x, второй по оси y. Если задано только одно значение, сдвиг по оси y будет равен 0
    • translate3d( , , ) — определяет сдвиг элемента по оси x, по оси y и по оси z
    • translateX( ) — определяет сдвиг элемента по оси x
    • translateY( ) — определяет сдвиг элемента по оси y
    • translateZ( ) — определяет сдвиг элемента по оси z
    • scale( ) — определяет масштабирование элемента. Можно задать два числа через запятую: первый по оси x, второй по оси y. Если задано только одно значение, масштаб по оси y будет равен масштабу по оси x
    • scale3d( , , ) — определяет масштаб элемента по оси x, по оси y и по оси z
    • scaleX( ) — определяет масштаб элемента по оси x
    • scaleY( ) — определяет масштаб элемента по оси y
    • scaleZ( ) — определяет масштаб элемента по оси z
    • rotate( ) — определяет поворот элемента на заданный угол относительно центра поворота, заданного свойством transform-origin
    • rotate3d( , , , ) — определяет поворот элемента на заданный угол по направлению вектора, заданного первыми тремя параметрами. Элемент поворачивается относительно точки, заданной свойством transform-origin
    • rotateX( ) — определяет угол поворота элемента по оси x
    • rotateY( ) — определяет угол поворота элемента по оси y
    • rotateZ( ) — определяет угол поворота элемента по оси z
    • skew( ) — определяет наклон элемента. Можно задать два числа через запятую: первый по оси x, второй по оси y. Если задано только одно значение, наклон по оси y будет равен 0
    • skewX( ) — определяет угол наклона элемента по оси x.
    • skewY( ) — определяет угол наклона элемента по оси y.
    • perspective( ) — расстояние в пикселях от зрителя до плоскости z = 0.
Значение по умолчанию none
Применимо к блочным и строчным элементам
Наследование нет
Версия CSS CSS 3
Поддерживается браузерами

Пример

Твой код:
Результат:


Заметки

Safari 5.0 и выше поддерживают аналогичное свойство -webkit-transform.

Safari 3.1 и выше Chrome 1 и выше поддерживают похожее свойство -webkit-transform, Opera 10.5 и выше поддерживает похожее свойство -o-transform, Firefox 3.5 и выше -moz-transform, а IE9 и выше -ms-transform, но все они поддерживают только функции 2d трансформации.

Несколько значений свойства transform

В качестве значений свойства transform можно перечислить сразу несколько функций, разделив их пробелом. При этом к элементу последовательно будет применено несколько трансформаций. Пример:

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

Перестановка значений может влиять на результат

Далее в учебнике: 3D-трансформации в CSS.

Трансформация элементов

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

Свойство transform

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

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

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

Мастер Йода рекомендует:  Объём рынка вымогательского ПО за последний год вырос в 25 раз

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

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

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

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

Поворот rotate()

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

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

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

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

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

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

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

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

Смещение translate()


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

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

CSS transform Свойство

Пример

Поворот, наклон и масштабирование трех различных элементов

div.b <
transform: skewY(20deg);
>

div.c <
transform: scaleY(1.5);
>

Определение и использование

Свойство transform применяет 2D или 3D преобразование к элементу. Это свойство позволяет вращать, масштабировать, перемещать, наклона и т.д., элементы.

Чтобы лучше понять свойство Transform, Просмотрите демонстрацию.

Значение по умолчанию: none
Inherited: no
Animatable: yes. Читайте о animatable
Version: CSS3
Синтаксис JavaScript: object.style.transform=»rotate(7deg)»

Поддержка браузера

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

Номера следуют -webkit-, -moz-, or -o- Укажет первую версию, которая работала с префиксом.

Свойство
transform (2D) 36.0
4.0 -webkit-
10.0
9.0 -ms-
16.0
3.5 -moz-
9.0
3.2 -webkit-
23.0
15.0 -webkit-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-
12.0 10.0 9.0
4.0 -webkit-
23.0
15.0 -webkit-

Синтаксис

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

Значение Описание
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)
Определение трехмерного преобразования с использованием матрицы 4×4 из 16 значений
translate(x,y) Определяет 2D перевод
translate3d(x,y,z) Определяет трехмерный перевод
translateX(x) Определяет перевод, используя только значение для оси X
translateY(y) Определяет перевод, используя только значение для оси Y
translateZ(z) Определяет трехмерный перевод, используя только значение для оси Z
scale(x,y) Определяет преобразование 2D масштаба
scale3d(x,y,z) Определяет преобразование трехмерного масштаба
scaleX(x) Определяет преобразование масштаба, предоставляя значение для оси X
scaleY(y) Определяет преобразование масштаба путем предоставления значения для оси Y
scaleZ(z) Определение преобразования трехмерного масштаба путем предоставления значения для оси Z
rotate(angle) Определяет 2D вращение, угол задается в параметре
rotate3d(x,y,z,angle) Определяет 3D вращение
rotateX(angle) Определение 3D вращения вдоль оси X
rotateY(angle) Определение 3D вращения вдоль оси Y
rotateZ(angle) Определение 3D вращения вдоль оси Z
skew(x-angle,y-angle) Определяет преобразование 2D наклона вдоль оси X и Y
skewX(angle) Определяет преобразование 2D наклона вдоль оси X
skewY(angle) Определяет преобразование 2D наклона вдоль оси Y
perspective(n) Определение вида перспективы для 3D преобразованного элемента
initial Присваивает этому свойству значение по умолчанию. Читайте о initial
inherit Наследует это свойство из родительского элемента. Читайте о inherit

Другие примеры

В этом примере демонстрируется создание снимков «Polaroid» и поворот рисунков.

СSS3 Свойство transform

Пример

Поворот, наклон и масштабирование трех различных элементов

div.b <
transform: skewY(20deg);
>

div.c <
transform: scaleY(1.5);
>

Определение и использование

Свойство transform свойство применяет преобразование 2D или 3D к элементу. Это свойство позволяет элементы вращать, масштабировать, перемещать, наклонять и т.д.

Чтобы лучше понять свойство transform, просмотр демо-версии.


Значение по умолчанию: none
Унаследованный: нет
Анимируемый: да Прочитайте о animatable Попробовать
Версия: CSS3
JavaScript синтаксис: object.style.transform=»rotate(7deg)» Попробовать

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Числа, за которыми следует -webkit-, -moz- или -o- указывают первую версию, которая работала с префиксом.

Свойство
transform (2D) 36.0
4.0 -webkit-
10.0
9.0 -ms-
16.0
3.5 -moz-
9.0
3.2 -webkit-
23.0
15.0 -webkit-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-
12.0 10.0 9.0
4.0 -webkit-
23.0
15.0 -webkit-

CSS Синтаксис

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

Значение Описание Воспроизвести
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 из 16 значений
translate(x,y) Определяет 2D преобразование Воспроизвести »
translate3d(x,y,z) Определяет 3D преобразование
translateX(x) Определяет преобразование, используя только значение для оси X Воспроизвести »
translateY(y) Определяет преобразование, используя только значение для оси Y Воспроизвести »
translateZ(z) Определяет 3D преобразование, используя только значение для оси Z
scale(x,y) Определяет 2D масштаб преобразование Воспроизвести »
scale3d(x,y,z) Определяет 3D масштаб преобразование
scaleX(x) Определяет масштабное преобразование, задавая значение для оси X Воспроизвести »
scaleY(y) Определяет масштабное преобразование, задавая значение для оси Y Воспроизвести »
scaleZ(z) Определяет масштабное преобразование, задавая значение для оси Z
rotate(angle) Определяет 2D поворот, угол задается в параметре Воспроизвести »
rotate3d(x,y,z,angle) Определяет 3D вращение
rotateX(angle) Определяет 3D вращение вдоль оси X Воспроизвести »
rotateY(angle) Определяет 3D вращение вдоль оси Y Воспроизвести »
rotateZ(angle) Определяет 3D вращение вдоль оси Z Воспроизвести »
skew(x-angle,y-angle) Определяет 2D косое преобразование вдоль оси X и Y Воспроизвести »
skewX(angle) Определяет 2D косое преобразование вдоль оси X Воспроизвести »
skewY(angle) Определяет 2D косое преобразование вдоль оси Y Воспроизвести »
perspective(n) Определяет перспективный вид для 3D преобразованного элемента
initial Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial
inherit Наследует это свойство от родительского элемента. Прочитайте о inherit

Примеры

Изображения брошены в таблицу
В этом примере показано, как создавать «полароидные» изображения и поворачивать их.

Мастер Йода рекомендует:  Основные методы ввода-вывода (IO)

Свойство CSS 3 transform

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

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

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

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

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

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

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

Где x и y — координаты точки (отсчитывается от левого верхнего угла элемента), относительно которой производятся преобразования. В качестве значений подходят единицы измерения CSS: px, em и т. д. Можно использовать проценты. Имеются ключевые слова: left, center, right для x (расположить точку слева, по центру или справа); top, center, bottom для y (вверху, по центру или внизу). Позиция по умолчанию:

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

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

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

matrix

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

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

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

Координата трансформации X:

Координата трансформации Y:

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


rotate

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

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

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

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

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

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

scale

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

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

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

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

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

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

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

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

translate

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

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

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

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

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

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

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

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


Перемещения и трансформации в CSS3

Здравствуй, дорогой хабрадруг! В интернете можно найти множество примеров отличного применения трансформаций и переходов в CSS3. В этой статье мы обратимся к основам основ CSS3 и научимся создавать что-то вроде этого. Данный туториал будет полезен тем, кто только начал знакомиться с CSS3. Давай-те же начнем!

Чтобы легче понять то, как устроено перемещение объекта, мы будем работать в системе координат.

Однако наша система координат имеет одну особенность: ось Y направлена в противоположную сторону, чем обычно. Почему? Дело в том, что HTML и CSS (наравне, например, с ActionScript) используют обратную систему координат, так как веб-страница начинается с левого верхнего угла и идет вниз.
Заметка: Мы будем полагать, что вы уже знакомы со структурой HTML и CSS. Я пропущу объяснения того, как настроить файл CSS, как разместить картинки и т.д. Мы сфокусируемся на анимировании изображений. Если вы не уверены в том, что ваши навыки на высоком уровне, то советуем взглянуть на курс уроков «HTML и CSS за 30 дней» (бесплатно и на английском языке), чтобы выучить все необходимое.

Мастер Йода рекомендует:  Программист Unity (MiddleSenior)

1: Горизонтальное перемещение

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

Двигаемся вправо

Чтобы переместить объект мы будем использовать transform: translate(x,y), где X — положительное число, а Y=0.

HTML
Откройте ваш любимый редактор кода и введите следующее:

Мы определили три класса к картинке:

  • object: Установление главных правил нашего объекта.
  • van: Мы будем использовать различные объекты для демонстрации каждого вида анимации.
  • move-right: Используя этот класс, мы будем двигать наш объект.

CSS
Во-первых, мы разместим наш объект (картинку грузовика) по центру.

В этом примере мы подвинем объект на 350px вправо. Использован синтаксис transform: translate(350px,0);. Кроме того объект будет двигаться только при наведении на него курсора: #axis:hover .move-right.

Параметр transform всего лишь переместит объект из одной точки в другую, но не создаст анимацию данного перемещения. Чтобы исправить это, нужно добавить параметр перемещения в классе .object.

Это правило перемещение скажет браузеру анимировать все параметры объекта на 2 секунды (без задержки) с помощью функции ease-in-out.
Мы можем использовать 6 различных функций хронометража перемещений:

  • linear: перемещение происходит постоянной скоростью от начала и до конца.
  • ease: перемещение начинается медленно и затем набирает скорость.
  • ease-in: перемещение начинается медленно.
  • ease-out: перемещение заканчивается медленно.
  • ease-in-out: перемещение начинается и заканчивается медленно.
  • cubic-bezier: ручное определение значения перемещения.

Посмотреть ДЕМО

Двигаемся влево

Чтобы переместить объект влево, нужно просто поставить отрицательное значение к оси ОХ, в то время как Y остается неизменным. В нашем случае мы переместим объект на —350px влево.

HTML
Создайте новый документ html и вставьте следующий код:

На этот раз мы используем класс move-left, чтобы переметить объект влево.

CSS
Теперь введем -350px для оси OX. transform: translate(-350px,0); — переместим объект влево.

Так как ранее мы уже определяли правила перемещения, нам не нужно делать это снова.
Посмотреть ДЕМО

2: Вертикальное перемещение

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

Двигаемся вверх

HTML
Шаблон HTML идентичен предыдущим примерам. Однако, мы заменим наш объект ракетой (для наглядности) и назначим класс move-up.

CSS
Так же как и грузовик, мы разместим ракету по центру:

Как мы отметили ранее, координата Y должна быть отрицательной. В нашем случае мы подвинем объект на 350px вверх.

Двигаемся вниз

Как вы догадались, чтобы переместить объект вниз, координата Y должна быть положительной, а X равняться 0. Синтаксис: translate(0,y);


HTML

CSS

3: Диагональное перемещение

Чтобы переместить объект по диагонали, мы совместим параметры x и y. Синтаксис будет следующим: transform: translate(x,y). В зависимости от направления, значение x и y может быть как положительным, так и отрицательным.

HTML

CSS

4: Вращение

Вращение в CSS3 регулируется градусными координатами (от 0° до 360°). Чтобы повернуть объект, примените следущие параметры: transform: rotate(ndeg); где n — градусы.

Вращение по часовой стрелке

Для того чтобы повернуть объект по часовой стрелке, применим положительное значение для rotate(ndeg).

HTML

CSS

Вращение против часовой стрелки

Для того чтобы повернуть объект против часовой стрелки, применим отрицательное значение для rotate(ndeg).

HTML

CSS

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

Масштабирование — это интересная особенность CSS3. Используя параметр scale(n) или параметр scale(x,y), мы можем либо увеличивать, либо уменьшать объект непосредственно в рамках HTML. Объект будет менять размер в зависимости от значения n/x,y, где ось X — ширина, а Y — высота.
Давайте посмотрим на следующий пример.

HTML

CSS

6: Множественные движения

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

HTML

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

CSS стиль transform. Правила трансформации объектов.

Internet Explorer 9 поддерживает свойство -ms-transform.

Safari, Chrome до версии 36 и Android до версии 4 поддерживают свойство -webkit-transform.

Opera с версии 15 до 23 поддерживает свойство -o-transform.

Firefox до версии 16 поддерживает свойство -moz-transform.


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

Краткая информация по CSS-свойству transform

Значение по умолчанию none
Наследуется Нет
Применяется К трансформируемым элементам

Правила написания свойства transform

Здесь — функция трансформации. Значение none отменяет трансформацию.

Функции трансформации

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

Масштаб элемента по горизонтали и вертикали. Значение 1 — уменьшает.

Масштабирует элемент по горизонтали.

Масштабирует элемент по вертикали.

Наклоняет элемент на заданный угол по вертикали.

Наклоняет элемент на заданный угол по горизонтали.

Сдвигает элемент на заданное значение по горизонтали и вертикали.

Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.

Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.

transform css

transform: scale(2, 2);

transform: skew(-30deg, -20deg);

transform: translate(40px, -40px);

Я люблю свою работу,
Я приду сюда в субботу
И конечно в воскресенье.

Здесь я встречу день ражденья,
Новый год, 8 марта,
Ночевать я буду завтра!

Если я не заболею,
Не сорвусь, не озверею,
Здесь я встречу все рассветы,
Все закаты и приветы.

От работы дохнут кони,
Ну, а я. БЕССМЕРТНЫЙ ПОНИ!

16 комментариев:

NMitra Про запятые думаю понятно — задаём группу свойств одним и тем же классам, id.

Остальное не могу со 100% уверенностью сказать, только догадки, поскольку информации толком не изучала. Почитаю, напишу статью. NMitra Посмотрите эту статью https://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html. Я думаю, что вам всё это знакомо.

Вторую планирую в том же духе. Хотя для большинства моих читателей — это китайская грамота. Космо Мизраил Горыныч Знак >
Означает, что элемент должен быть прямым наследником указанного, т.е. при div > span <. >
div -> span работает, а вот
div -> p -> span — не работает.

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

Обратен знаку + . Выбирает эл-т перед указанным.

Вот такая вот арифметика 🙂
также знак

используется при сравнении параметров; правило исполняется, если есть указанное слово в указанном параметре, например:
p[title

Добавить комментарий