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


Содержание

Про CSS

Функции 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 — сдвиг по вертикали.

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

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

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) — определяет глубину сцены. Чем меньше значение, тем больше вытянута сцена по отношению к зрителю.

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

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 пикселей показан ниже.

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

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

CSS стиль transform-origin. Задание центра трансформации

CSS стиль transform-origin задает координаты точки, относительно которой будет происходить трансформация объекта. Настольные Мобильные

Internet Explorer Chrome Opera Safari Firefox
9 10 36 15 23 4 16
Android Firefox Mobile Opera Mobile Safari Mobile
2.1 4 3.5 16 11.5 4

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

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

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

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

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

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

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

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

— координата по оси X. Может следующие значения: (в любой единице измерения CSS), , left , center , right

координата по оси Y. Может принимать значения: (в любой единице измерения CSS), , top , center , bottom

— координата по оси Z. Может задаваться только в любых единицах для измерения длины (кроме %).

Оси при трансформации элемента


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

CSS :: Трансформация

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

Трансформация элементов в CSS представляет собой возможность сдвигать, поворачивать, масштабировать, а также наклонять (деформация сдвига) элементы. При этом существует два вида css -трансформаций: 2D -трансформации на плоскости и 3D -трансформации в пространстве. Осуществляются такие трансформации при помощи анимируемого ненаследуемого css -свойства transform, которое в качестве значений принимает ряд специальных функций, как раз и позволяющих трансформировать элементы должным образом. Перечислим эти функции:

  • translate() – сдвигает элемент на плоскости вдоль осей X и Y ;
  • translateX() – сдвигает элемент вдоль оси X ;
  • translateY() – сдвигает элемент вдоль оси Y ;
  • translateZ() – сдвигает элемент вдоль оси Z ;
  • translate3d() – сдвигает элемент в трехмерном пространстве;
  • scale() – масштабирует элемент на плоскости;
  • scaleX() – масштабирует элемент вдоль оси X ;
  • scaleY() – масштабирует элемент вдоль оси Y ;
  • scaleZ() – масштабирует элемент вдоль оси Z ;
  • scale3d() – масштабирует элемент в трехмерном пространстве;
  • rotate() – поворачивает элемент на требуемый угол на плоскости относительно точки трансформации, которая задается свойством transform-origin ;
  • rotateX() – поворачивает элемент на требуемый угол относительно оси X ;
  • rotateY() – поворачивает элемент на требуемый угол относительно оси Y ;
  • rotateZ() – поворачивает элемент на требуемый угол относительно оси Z ;
  • rotate3d() – поворачивает элемент в трехмерном пространстве;
  • skew() – наклоняет элемент на заданный угол на плоскости;
  • skewX() – наклоняет элемент вдоль оси X ;
  • skewY() – наклоняет элемент вдоль оси Y ;
  • matrix() – задает двумерную матрицу преобразований, объединяя несколько функций в одной;
  • matrix3d() – задает трехмерную матрицу преобразований;
  • perspective() – задает перспективу (глубину сцены);
  • none – отменяет эффекты трансформации для данного элемента.

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

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

Функция трансформации translate()

Функция трансформации translate() позволяет сдвигать элемент на плоскости вдоль осей X и Y . В качестве параметров функция может принимать два значения в виде любых допустимых в CSS единиц измерения длины, как положительных, так и отрицательных. Первое значение смещает элемент в горизонтальном направлении вдоль оси X (если значение больше нуля, то элемент сдвигается вправо, а если отрицательное, то влево), а второе предназначено для смещения в вертикальном положении вдоль оси Y (если значение больше нуля, то элемент сдвигается вниз, а если отрицательное, то вверх). Второе значение разрешается не указывать, тогда трансформируемый элемент будет сдвигаться только в горизонтальном направлении вдоль оси X (см. пример №1).

Пример №1. Функция трансформации translate()

Функция трансформации scale()

Функция трансформации scale() дает возможность масштабирования элемента на плоскости, принимая в качестве параметров два числа, первое из которых масштабирует элемент в горизонтальном направлении, а второе — по вертикали. Значение параметра большее единицы (например, 1.7 ), приводит к увеличению масштаба элемента, меньшее единицы (например, 0.8 ) — к уменьшению масштаба. Если же значение еще и меньше нуля, то элемент не только масштабируется, но также и зеркально отражается относительно соответствующей оси (см. пример №2). Отметим, что значение параметра равное единице не изменяет масштаб элемента.

Илон Маск рекомендует:  Iis вкладка отладка приложений

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

Пример №2. Функция трансформации scale()

Функция трансформации rotate()

Функция трансформации rotate() позволяет поворачивать элемент на плоскости вокруг точки трансформации на требуемый угол (см. пример №3). Точка трансформации по умолчанию располагается в центре элемента и может быть изменена при помощи свойства transform-origin (см. ниже). В качестве значений функция rotate() принимает все доступные в CSS единицы измерения углов: градусы (например, rotate(30deg) ), грады (например, rotate(100grad) ), радианы (например, rotate(-3.15rad) ) или же просто обороты (например, rotate(2.5turn) ). При этом положительные значения угла приводят к повороту элемента по часовой стрелке, отрицательные — против.

Пример №3. Функция трансформации rotate()

Функция трансформации skew()

Функция трансформации skew() используется для наклона (деформации сдвига) элемента на плоскости вдоль осей X и Y , принимая в качестве параметров значения углов: первое значение задает угол наклона элемента в горизонтальном направлении (если значение больше нуля, то элемент наклоняется влево, а если отрицательное, то вправо), второе значение задает угол наклона элемента по вертикали (если значение больше нуля, то элемент наклоняется вниз, а если отрицательное, то вверх). Опять же, разрешается использовать любые доступные в CSS единицы измерения углов: градусы, грады, радианы или же просто обороты (например, skew(2.5turn, -30deg) ). При этом вместо нулевых значений допустимо использовать просто нуль, а второе значение можно не указывать вообще, тогда трансформируемый элемент будет наклоняться только в горизонтальном направлении вдоль оси X (см. пример №4).

Пример №4. Функция трансформации skew()

Функция трансформации matrix()

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

  • scaleX – изменяет масштаб элемента по горизонтали: значение от 0 до 1 уменьшает (сжимает) элемент вдоль оси X , больше 1 — увеличивает (расширяет) его;
  • skewY – наклоняет элемент по вертикали (сдвиг вертикальных сторон элемента друг относительно друга вдоль оси Y ): если значение больше нуля, то элемент наклоняется вверх, а если отрицательное, то вниз;
  • skewX – наклоняет элемент по горизонтали (сдвиг горизонтальных сторон элемента друг относительно друга вдоль оси X ): если значение больше нуля, то элемент наклоняется влево, а если отрицательное, то вправо;
  • scaleY – изменяет масштаб элемента по вертикали: значение от 0 до 1 уменьшает (сжимает) элемент вдоль оси Y , больше 1 — увеличивает (расширяет) его;
  • translateX – смещает элемент на указанное число пикселей по горизонтали: если значение больше нуля, то элемент сдвигается вправо, а если отрицательное, то влево;
  • translateY – смещает элемент на указанное число пикселей по вертикали: если значение больше нуля, то элемент сдвигается вниз (опускается), а если отрицательное, то вверх (поднимается).

Пример №5. Функция трансформации matrix()

Функция perspective()

Рассмотренные выше примеры функций позволяют трансформировать элементы на плоскости. Однако в CSS имеются возможности осуществлять и 3D -трансформации, добавляя третье измерение к веб-страницам.

Одной из таких возможностей является функция perspective() , которая задает глубину просмотра ( 3d -перспективу), т.е. расстояние по оси Z от плоскости экрана до точки сходимости линий. В результате создается впечатление приближения либо отдаления элемента от зрителя (см. рис №6).

Рис. №6. Зависимость масштабирования вдоль оси Z от 3d-перспективы

Масштабирование элемента пропорционально d/(d–z) , где d (значение перспективы) — это расстояние от плоскости экрана до предполагаемого положения глаз зрителя, а Z — координата желаемого расположения плоскости элемента на оси Z , направленной к пользователю. Так на верхнем рисунке, чтобы создать для пользователя впечатление, что исходный круг (изображен сплошным контуром) на экране стал ближе к нему в два раза (круг изображен пунктиром), его размер также необходимо увеличить в два раза (голубой круг), т.к. d/(d–d/2)=2 (здесь z=d/2 ). На нижнем рисунке изображена ситуация, когда у пользователя создается впечатление, что исходный круг на экране удалился от него на половину расстояния от пользователя до экрана. Для этого потребовалось уменьшить размер исходного круга на треть, т.к. d/(d–(-d/2))=d/(d+d/2)=2/3 (здесь z=-d/2 ).

В качестве параметра функция perspective() принимает любые доступные в CSS единицы измерения длины (если не указаны, то по умолчанию будут использованы пиксели). При этом чем больше будет положительное значение, тем менее будет выражен эффект перспективы (элемент будет все больше удаляться от зрителя), и наоборот, при уменьшении положительного значения эффект перспективы становится более выраженным (элемент будет все больше приближаться к зрителю). Что касается отрицательных значений и нуля, то они отменяют действие перспективы (см. пример №7). Однако следует иметь в виду, что если перспективу не задавать, то будут отсутствовать и эффекты трансформации в трехмерном пространстве, например, повороты элемента вокруг осей X и Y или его перемещение вдоль оси Z .

Пример №7. Функция трансформации perspective()

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

css-свойство perspective

Когда 3D -перспектива задается с помощью функции perspective() , 3D -пространство активируется только для одного элемента. Если же требуется обеспечить одинаковую перспективу для всех дочерних элементов родителя, то можно использовать специальное ненаследуемое css -свойство perspective, которое активирует 3D -пространство внутри элемента-родителя и будет применено ко всем дочерним элементам сразу. В результате такой манипуляции отпадает необходимость использовать функцию для каждого дочернего элемента. При этом в случае необходимости для конкретных элементов всегда можно будет использовать функцию perspective() , переопределив значение свойства (см. пример №8).

Что касается значений, то свойство perspective может принимать:

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

Пример №8. Использование css-свойства perspective

Обязательно поэкспериментируйте с данным примером, попробовав различные значения перспективы.


css-свойство perspective-origin

По умолчанию точка сходимости линий (т.е. точка расположения глаз зрителя при взгляде на экран) при использовании свойства perspective находится на оси, проходящей через центр элемента перпендикулярно плоскости экрана (см. рис. №9). Однако эту точку можно смещать, изменяя ее координаты X и Y . Делается это при помощи ненаследуемого css -свойства perspective-origin, которое должно использоваться совместно с perspective для родительского блока и свойством transform для дочернего элемента.

Рис. №9. Пример смещения точки сходимости линий при использовании перспективы

В качестве значений perspective-origin принимает через пробел координаты X и Y точки сходимости линий (см. пример №10). Для них разрешается использовать:

  • для координаты X – любые доступные в CSS единицы измерения длины, проценты (по умолчанию X=50% ), а также ключевые слова left (эквивалентно 0% по оси X ), center (эквивалентно 50% по оси X ) или right (эквивалентно 100% по оси X );
  • для координаты Y – любые доступные в CSS единицы измерения длины, проценты (по умолчанию Y=50% ), а также ключевые слова top (эквивалентно 0% по оси Y ), center (эквивалентно 50% по оси Y ) или bottom (эквивалентно 100% по оси Y ).

Отметим, что за начало координат при расчетах принимается левый верхний угол элемента, а проценты рассчитываются относительно его ширины. При этом разрешается использовать не только положительные, но и отрицательные значения координат. Кроме того, если передать свойству perspective-origin только одно значение, то оно будет считаться координатой X , а для координаты Y будет использовано значение по умолчанию.

Пример №10. Пример использования css-свойства perspective-origin

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

css-свойство transform-origin

С расположением точки сходимости линий и возможностью ее смещения в плоскости, которая проходит параллельно экрану через эту точку, мы разобрались. Однако на результат трансформации влияет также и расположение еще одной важной точки, называемой центром (точкой) трансформации. По умолчанию трансформация элемента происходит относительно точки трансформации, которая находится в плоскости экрана в центре трансформируемого элемента (см. рис №11). Однако эту точку можно смещать, изменяя ее координаты X , Y и Z (координаты отсчитываются от левого верхнего угла элемента). Делается это при помощи ненаследуемого css -свойства transform-origin, которое используется совместно с transform.

Рис. №11. Расположение центра трансформации по умолчанию

В качестве значений transform-origin принимает через пробел координаты X , Y и Z центра трансформации (см. пример №12). Для них разрешается использовать:

  • для координаты X – любые доступные в CSS единицы измерения длины, проценты (по умолчанию X=50% ), а также ключевые слова left (эквивалентно 0% по оси X ), center (эквивалентно 50% по оси X ) или right (эквивалентно 100% по оси X );
  • для координаты Y – любые доступные в CSS единицы измерения длины, проценты (по умолчанию Y=50% ), а также ключевые слова top (эквивалентно 0% по оси Y ), center (эквивалентно 50% по оси Y ) или bottom (эквивалентно 100% по оси Y ).
  • для координаты Z – любые доступные в CSS единицы измерения длины, исключая проценты и ключевые слова.

Опять же, за начало координат при расчетах принимается левый верхний угол элемента, а проценты рассчитываются относительно его размеров. При этом разрешается использовать не только положительные, но и отрицательные значения координат. Кроме того, если передать свойству transform-origin только одно значение, то оно будет считаться координатой X , если два, то X и Y (соответственно неуказанные координаты примут значения по умолчанию).

Пример №12. Пример использования css-свойства transform-origin

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

css-свойство transform-style

Когда мы трансформируем родительский элемент в трехмерном пространстве, то все дочерние элементы по умолчанию отрисовываются в двумерном пространстве своего родителя, т.е. располагаются в его плоскости и могут без проблем подвергаться 2D -трансформациям. Но если мы попробуем применить к дочерним элементам 3D -трансформации, то результат нас не очень обрадует, т.к. точки трехмерного пространства все равно будут спроецированы на плоскость родительского элемента и мы получим совсем не то, что ожидали (см. пример №13). Для решения этой проблемы и возможности активации для дочерних трансформируемых элементов собственного 3D -пространства в CSS предусмотрено ненаследуемое свойство transform-style, которое применяется к родительскому контейнеру и определяет, как дочерние трансформированные элементы (т.е. элементы, для которых будет задано свойство transform) будут отображаться в 3D -пространстве:

  • flat – будут трансформироваться в плоскости родителя (используется по умолчанию);
  • preserve-3d – будут трансформироваться в своем собственном 3D -пространстве.

Пример №13. Пример использования css-свойства transform-style

Итак, в примере выше у нас имеется обычный общий ‘div’ (темно-серый фон), в котором расположены два других ‘div’ , которые подвергаются идентичной трансформации поворота вокруг оси X (запустите пример в браузере и визуально убедитесь в этом). Оба этих блока имеют еще и по одному дочернему абзацу, которые мы также пытаемся подвергнуть дополнительной 3D -трансформации поворота вокруг оси X (она лежит в плоскости родительского для текущего абзаца элемента). Однако, если в нижнем блоке мы видим, что абзац дополнительно повернулся (как мы и ожидали), то в верхнем блоке мы поворота не увидели. Вместо этого мы увидели какую-то 2D -трансформацию, получившуюся в результате проецирования точек третьего измерения на плоскость родительского элемента. Это связано с тем, что в нижнем блоке мы активировали для абзаца собственное 3D -пространство при помощи класса three_d .

Обязательно поэкспериментируйте с данным примером, попробовав, например, применить к абзацам трансформацию поворота вокруг оси Z (разницы видно не будет, т.к. такая трансформация будет происходить в плоскости родительского элемента).

css-свойство backface-visibility

Когда в результате трансформации элемента (например, поворота вокруг оси X ) он поворачивается к нам обратной стороной, его обратная сторона по умолчанию остается видимой пользователю и отображается зеркально (см. пример №14). Однако такое поведение можно легко изменить при помощи ненаследуемого css -свойства backface-visibility, которое определяет, будет показываться обратная сторона элемента или нет. В качестве значений свойство принимает два ключевых слова:

  • visible – обратная сторона элемента видна и отображается зеркально сквозь переднюю сторону элемента (используется по умолчанию);
  • hidden – обратная сторона элемента не видна (скрывается за передней поверхностью элемента).

Пример №14. Пример использования css-свойства backface-visibility

В примере выше второй элемент не отображается, т.к. он больше не просвечивается. Это может быть полезно, когда нужно создать для пользователя впечатление того, что у элемента имеется более одной стороны. Например, чтобы создать игральную карту, можно взять два одинаковых по размеру фоновых изображения, применить к ним соответствующую трансформацию поворота и установить для backface-visibility значение visible . При повороте на угол более, чем девяноста градусов, одно изображение станет невидимым, а второе наоборот. Этот и другие примеры использования трансформаций в анимации можно посмотреть на соответствующей странице нашего учебного сайта №1.

Илон Маск рекомендует:  Моделирование при сжатии текстовых данных подсчет

Пару слов о 3D-функциях трансформации

В конце хотелось бы сказать пару слов о перечисленных вначале страницы 3D -функциях translate3d() , scale3d() , rotate3d() и matrix3d() . Их использование предусматривает некоторое знание математики и матриц, что подходит далеко не каждому верстальщику. Поэтому в большинстве случаев о них можно смело забыть и в случаях, когда требуется трансформация элемента вдоль оси Z , пользоваться более простыми функциями translateZ() , scaleZ() и rotateZ() . Тоже самое касается трехмерных трансформаций и вдоль других осей.

Далее, следует обратить внимание на то, что в списке отсутствуют функции skewZ() и skew3d() . Это связано с тем, что skew — единственная трансформация, которую допускается осуществлять только на плоскости (деформация сдвига вдоль оси Z не разрешается).

Несмотря на то, что CSS позволяет нам преобразовывать двумерные html -элементы в трехмерном пространстве добавляя чувство глубины в сцену, сами элементы все равно остаются плоскими. Поэтому сделать из квадрата куб никак не получится, для этого потребуется целых шесть отдельных элементов по одному для каждой стороны. Тем не менее, если говорить о создании красивых 3D -эффектов на страницах сайтов, то возможностей CSS для этого вполне достаточно.

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

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

Поворот

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

В предыдущем примере с помощью свойства трансформаций 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)

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

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

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

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

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

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

Перемещение

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

Искажение

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

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

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

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

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

Трансформации, переходы и анимации

Трансформации

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

Вращение

Для поворота элемента свойство transform использует функцию rotate :

После слова rotate в скобках идет величина угла поворота в градусах. Например, повернем блок на 30 градусов:

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

Угол поворота может представлять как положительное, так и отрицательное значение. В случие отрицательного значения поворот производится в противоположную сторону.

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

Применение масштабирования имеет следующую форму:

Значение больше 1 приводит к растяжению по вертикали и горизонтали, а меньше 1 — к сжатию. То есть значение 0.5 приводит к уменьшению в два раза, а значение 1.5 — к увеличению в полтора раза.

Можно также задать величины масштабирования отдельно для вертикали и горизонтали:

В данном случае по горизонтали будет идти масштабирование в 2 раза, а по вертикали — в 0.5 раз.

Также можно по отдельности задать параметры масштабирования: функция scaleX() задает изменение по горизонтали, а scaleY() — по вертикали. Например:

Используя отрицательные значения, можно создать эффект зеркального отражения:

Перемещение

Для перемещения элемента используется функция translate :

Значение offset_X указывает, на сколько элемент смещается по горизонтали, а offset_Y — по вертикали.

К примеру, сместим блок на 30 пикселей вниз и на 50 пикселей вправо:

В качестве единиц измерения смещения можно применять не только пиксели, но и любые другие единицы измерения длины в CSS — em, % и тд.

С помощью дополнительных функций можно отдельно применять смещения к горизонтали или вертикали: translateX() (перемещение по горизонтали) и translateY() (перемещение по вертикали). Например:

Кроме положительных значений также можно использовать и отрицательные — они перемещают элемент в противоположную сторону:

Наклон

Для наклона элемента применяется функция skew() :


Первый параметр указывает, на сколько градусов наклонять элемент по оси X, а второй — значение наклона по оси Y.

Для создания наклона только по одной оси для другой оси надо использовать значение 0. Например, наклон на 45 градусов по оси X:

Или наклон на 45 градусов только по оси Y:

Для создания наклона отдельно по оси X и по оси Y в CSS есть специальные функции: skewX() и skewY() соответственно.

Также можно передавать отрицательные значения. Тогда наклон будет осуществляться в противоположную сторону:

Комбинирование преобразований

Если нам надо применить к элементу сразу несколько преобразований, скажем, вращаение и перемещение, то мы можем их комбинировать. Например, применение всех четырех преобразований:

Браузер применяет все эти функции в порядке их следования. То есть в данном случае сначала к элементу применяется перемещение, потом наклон, потом масштабирование и в конце вращение.

Исходная точка трансформации

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

СSS3 2D Трансформация

CSS3 Трансформация

CSS3 трансформация позволяет преобразовывать, поворачивать, масштабировать и наклонять элементы.

Трансформация — это эффект, который позволяет элементу изменять форму, размер и положение.

CSS3 поддерживает 2D и 3D преобразования.

Наведите мышь над элементами, чтобы увидеть разницу между 2D и 3D трансформации:

Поддержка браузера для 2D трансформации

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

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

Свойство
transform 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-
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-
9.0
3.2 -webkit-
23.0
15.0 -webkit-
12.1
10.5 -o-

CSS 2D Трансформация

В этой главе вы узнаете о следующих методах 2D трансформации:

Совет: Вы узнаете о 3D трансформации в следующей главе.

Метод translate()

Метод translate() перемещает элемент из текущего положения (в соответствии к параметрам, заданным для оси X и Y).

В следующем примере элемент

Пример

Метод rotate()

Метод rotate() поворачивает элемент по часовой стрелке или против часовой стрелки в соответствии с заданной степенью.

Метод в следующем примере, элемент

Пример

Использование отрицательных значений повернет элемент против часовой стрелки.

Метод следующий пример вращает элемент

Пример

Метод scale()

Метод scale() увеличивает или уменьшает размер элемента (в соответствии с параметрами, заданными для ширины и высоты).

Метод в следующем примере элемент

Пример

Метод в следующем примере элемент

Пример

Метод skewX()


Метод skewX() наклоняет элемент вдоль оси X на заданный угол.

Метод следующий пример наклоняет элемент

Пример

Метод skewX()

Метод skewY() наклоняет элемент вдоль оси Y на заданный угол.

Метод в следующем примере элемент

Пример

Метод skewY()

Метод skew() наклоняет элемент вдоль осей X и Y на заданные углы.

Метод в следующем примере элемент

Пример

Если второй параметр не указан, он имеет нулевое значение. В следующем примере элемент

Пример

Метод matrix()

Метод matrix() объединяет все 2D методы преобразования в один.

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

Метод параметров: matrix(scaleX() , skewY() , skewX() , scaleY() , translateX() , translateY())

Пример

Проверьте себя с помощью упражнений!

Свойства CSS3 трансформации

Метод в следующей таблице перечислены все свойства преобразования 2D:

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

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

Рис. 171 Пример трансформации в повседневной жизни.

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

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

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

Свойство Chrome Firefox Opera Safari IExplorer Edge
transform (2D) 36.0
4.0
-webkit-
16.0
3.5
-moz-
23.0*
11.5 -o-
15.0 -webkit-
9.0
3.2
-webkit-
10.0
9.0
-ms-
12.0
transform (3D) 36.0
12.0
-webkit-
16.0
10.0
-moz-
23.0
15.0
-webkit-
9.0
3.2
-webkit-
10.0 12.0

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

Наклон элементов

Для начала разомнемся и научимся делать наклоны. Не забывайте о своём здоровье, неплохо будет, если вы будете повторять движения за элементами, тогда вы получите не только плюс в знаниях, но и сохраните свою осанку. Не переусердствуйте =)

И так, рассмотрим пример, в котором мы применим первое преобразование – skew() , оно определяет двухмерное преобразование путем наклона элемента относительно осей X (горизонтальная ось) и Y (вертикальная ось).

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

Обратите внимание, что допускается указывать только одно значение, в этом случае наклон элемента произойдет только по оси X. Элемент по умолчанию всегда поворачивается относительно своего центра, мы позднее научимся изменять это поведение (изменять исходную точку преобразования).

Результат нашего примера:

Рис. 172 Наклоны элементов в CSS (функция преобразования элемента skew).

Современный стандарт имеет еще две функции, которые позволяют наклонять элементы. Это функция skewX() , она определяет двухмерное преобразование путем наклона элемента относительно оси X и skewY() , которая позволяет наклонить элемент относительно оси Y. Они принимают только одно значение в градусах в качестве параметра.

Давайте рассмотрим их применение.

В этом примере мы использовали для верхнего ряда элементов функцию skewX() , которая позволяет производить наклоны элементов по оси X (горизонтальная ось), а для нижнего ряда элементов использовали функцию skewY() , которая позволяет производить наклоны элементов по оси Y (вертикальная ось). Обратите внимание, что, как и при использовании функции skew() допускается использовать отрицательные значения, наклон при этом будет зеркален положительному значению.

Результат нашего примера:


Рис. 173 Наклоны элементов по осям (функции преобразования элементов skewX и skewY).

Двухмерный поворот элементов

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

Допускается указывать значения угла поворота в следующих единицах измерения:

  • degградусы. Оборот окружности составляет 360deg.
  • gradграды. Оборот окружности составляет 400grad.
  • radрадианы. Оборот окружности составляет 2π (

6.28rad).

  • turnобороты. Оборот окружности составляет 1turn.
  • Например, прямой угол составляет 90deg или 100grad или 0.25turn или примерно

    Давайте рассмотрим следующий пример:

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

    Результат нашего примера.

    Рис. 174 Двухмерный поворот элементов в CSS (функция преобразования элементов rotate).

    Трехмерный поворот элементов

    Следующие функции, которые мы рассмотрим, позволяют вращать элементы в трехмерном пространстве. Мы начнем знакомство с трехмерными преобразованиями с функций rotateX() , rotateY() и rotateZ() . Как вы можете догадаться, каждая из них по отдельности контролирует вращение элемента по определенной оси в пространстве.

    Рис. 175 Схема вращения элементов по осям X, Y и Z.

    Перейдем к примеру, в котором рассмотрим применение этих функций.

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

    Результат нашего примера:

    Рис. 176 Трехмерный поворот элементов по осям (функции преобразования элементов rotateX, rotateY и rotateZ).

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

    Функция rotate3d() имеет следующий синтаксис:

    Элемент поворачивается под углом, задаваемым последним параметром относительно вектора направления. Первые три параметра определяют, вокруг какой из осей координат будет вращаться объект (X, Y, Z), а последний параметр определяет угол, задаваемый в градусах. Значения X, Y и Z должны задаваться в виде чисел (соотношение углов).

    Например, rotate3d(2, 1, 0, 50deg) заставит объект повернуться на 50 градусов по оси X, по оси Y на (50 * 1 / 2) = 25 градусов и по оси Z вращение не происходит.

    Рассмотрим следующий пример:

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

    Результат нашего примера:

    Рис. 177 Трехмерный поворот элементов (функция преобразования элемента rotate3d).

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

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

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

    Рассмотрим пример использования:

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

    Результат нашего примера:

    Рис. 178 Пример масштабирования элементов (функция преобразования элемента scale).

    По аналогии с предыдущими функциями Вы можете производить масштабирование элементов и для конкретной оси, для этого в CSS существуют функции преобразования scaleX() , scaleY() и scaleZ() .

    Рассмотрим их в следующем примере:

    Для демонстрации работы трехмерного масштабирования функцией scaleZ() , мы добавили несколько функций для элемента перечисленных через пробел. Функция rotateX() поворачивает наш элемент по оси X при наведении, а новая для Вас функция преобразования perspective() определяет перспективу обзора элемента, создавая для пользователя иллюзию глубины. Чем больше значение, указанное для функции перспективы, тем дальше от пользователя расположен элемент. Значение должно быть больше нуля. Мы еще вернемся к более подробному изучению этой функции в следующей статье учебника.

    Результат нашего примера:

    Рис. 179 Масштабирование элементов по осям (функции преобразования элементов scaleX, scaleY и scaleZ).


    Трехмерное масштабирование элементов

    Следующая функция, которую мы рассмотрим это функция scale3d() , она определяет трехмерное преобразование путем масштабирования элемента по оси X, по оси Y и по оси Z. Перейдем к примеру:

    В этом примере были использованы различные значения функции scale3d() , благодаря которой, мы масштабируем элемент сразу по трём осям. Для демонстрации работы трехмерного масштабирования функцией scale3d() , мы добавили функцию rotateX() , которая поворачивает наш элемент по оси X и функцию преобразования perspective() , которая определяет перспективу обзора элемента, создавая для пользователя иллюзию глубины.

    Результат нашего примера:

    Рис. 180 Трехмерное масштабирование элементов по осям (функция преобразования элемента scale3d).

    Вопросы и задачи по теме

    Перед тем как перейти к изучению следующей темы пройдите практические задания:

    • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла и изображение) в любую папку на вашем жестком диске:

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

      Практическое задание № 34.

      Подсказка: для отдаления, либо приближения изображения Вам необходимо воспользоваться вышерассмотренной функцией scale() . Кроме того, Вам необходимо скрывать переполнение внутри блока с изображением, для этого Вам поможет CSS свойство overflow .

      В следующем практическом примере я предлагаю Вам создать красивое меню навигации. Ранее мы не рассматривали создание навигации, но в этом нет ничего сложного. В большинстве случаев навигация основана на том, что при наведении на определённый элемент отображаются скрытые элементы. Отображение элементов в большинстве случаев осуществляется за счет измененения значения свойства display со значения none (элемент не отображается) на, например, block (если нам необходимо после отображения увидеть блочный элемент). Это не единственный способ как можно скрывать элементы меню и так как эта тема, напомню, трансформирование элементов, то мы с Вами рассмотрим скрытие с помощью функции scaleY() .

      Я предлагаю следующую структуру нашего горизонтального меню навигации:

      Базовое задание: чтобы сделать нашу навигацию горизонтальной основные элементы необходимо будет разместить в линейку ( inline-block ) и при наведении на них необходимо будет отображать вложенные элементы (маркированные списки). Попробуйте отобразить их с помощью изменения свойства display со значения none (элемент не отображается) на block , а уже позже после этого подумайте как это можно сделать с помощью функции scaleY() .

      Сложное задание: убрать наклон у текста, который находится внутри элементов .

      Меню навигации, которое у Вас должно получиться (размеры и цвет элементов могут быть произвольными):

      Практическое задание № 35.

      1. Базовое задание: чтобы, вложенные списки не влияли на структуру основного меню навигации укажите для них абсолютное позиционирование (position: absolute ), а для элементов основного меню относительное позиционирование (position: relative ). Функция scaleY() со значением 0 скроет элемент, а со значением 1 отобразит.
      2. Продвинутое задание: чтобы задать наклон для четных и нечетных элементов списка воспользуйтесь псевдоклассом :nth-child и функцией skewX() .
      3. Сложное задание: чтобы убрать наклон у текста Вам необходимо применить обратную трансформацию, то есть если у нас элемент списка наклонен на положительное количество градусов, то гиперссылка (элемент ), должна быть наклонена на тоже число градусов, но уже с отрицательным углом. Вторая проблема выбрать четные и не четные элементы , так как они являются единственными детями своих родителей. Выбрать их селектором :nth-child у нас не получится, вернее не получится выбрать четные элементы, так как их по просту нет. Один из вариантов использовать отдельные классы, либо атрибуты. Я предлагаю использовать HTML 5 глобальный атрибут data-*, который позволяет создавать пользовательские атрибуты. После этого Вам необходимо будет просто применить селекторы атрибутов. У меня получилась следующая структура:

    Хочу еще раз напомнить Вам, что когда Ваши элементы имеют блочно-строчную структуру, то необходимо их писать внутри HTML в линейку, во избежании пробельных символов, которые появляются при переносе HTML кода на новую строку. В нашем примере это не очевидно, но когда вы будуете использовать процентные значения это может нарушить Вашу верстку. Более подробно об этом было рассмотрено ранее в статье «Размеры блочных элементов в CSS».

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

    CSS стиль transform-origin. Задание центра трансформации

    CSS стиль transform-origin задает координаты точки, относительно которой будет происходить трансформация объекта. Настольные Мобильные

    Internet Explorer Chrome Opera Safari Firefox
    9 10 36 15 23 4 16
    Android Firefox Mobile Opera Mobile Safari Mobile
    2.1 4 3.5 16 11.5 4

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

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

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

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

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

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

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

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

    — координата по оси X. Может следующие значения: (в любой единице измерения CSS), , left , center , right

    координата по оси Y. Может принимать значения: (в любой единице измерения CSS), , top , center , bottom

    — координата по оси Z. Может задаваться только в любых единицах для измерения длины (кроме %).

    Оси при трансформации элемента

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

    CSS 2D Трансформации

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

    Следующий пример перемещает

    пример

    rotate() Метод

    rotate() метод поворачивает элемент по часовой стрелке или против часовой стрелки в соответствии с заданной степенью.

    Следующий пример поворачивает

    пример

    Используя отрицательные значения будет вращать элемент против часовой стрелки.

    Следующий пример поворачивает

    пример

    scale() Метод

    В scale() метод увеличивает или уменьшает размер элемента ( в соответствии с заданными параметрами для ширины и высоты).

    Следующий пример увеличивает

    пример

    Следующий пример уменьшает

    пример

    skewX() Метод

    skewX() метод перекосы элемент вдоль оси Х по данным углом.

    Следующий пример наклоняются

    пример

    skewY() Метод

    skewY() метод перекосы элемент вдоль оси ординат по данным углом.

    Следующий пример наклоняются

    пример

    skew() Метод

    skew() метод перекосы элемент вдоль X и Y оси по заданным углам.

    Следующий пример наклоняются

    пример

    Если второй параметр не указан, то он имеет нулевое значение. Таким образом, следующий пример наклоняются

    пример

    matrix() Метод

    matrix() метод сочетает в себе все 2D преобразования методов в одно целое.

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

    Параметры являются следующие: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) :

    пример

    Проверьте себя с упражнениями!

    CSS3 Transform Properties

    В следующей таблице перечислены все 2D преобразования свойства:

    Илон Маск рекомендует:  Информация о доменных зонах Domain zone information
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL