scaleZ() в CSS

Содержание

Что делает функция преобразования scaleZ() CSS?

Я пытаюсь превратить мой крошечный мозг в 3D-преобразования CSS, и у меня возникли проблемы с пониманием функции scaleZ() .

scale() , scaleX() и scaleY() имеют смысл: они растягивают элемент вдоль указанной оси, умножая его размер вдоль этой оси на число, которое вы предоставляете.

Но scaleZ() кажется другим:

  • Это относится к дочерним элементам элемента
  • Он не влияет на размеры дочерних элементов, поскольку элементы HTML не имеют никакого размера вдоль оси z (т.е. вы не можете сделать

[ scaleZ() ] влияет на масштабирование вдоль оси z в преобразованных дочерних элементах.

Я не могу понять, что это на самом деле означает на практике. Может ли кто-нибудь дать объяснение, желательно с некоторым примером кода?

Кажется глупым ответить на вопрос через два года после его запроса, но опубликовать его для потомков.

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

Это легко объяснить, но немного сложно понять, если у вас нет математического фона. (Но ценность в Википедии в выходные и поисковые запросы Google научит вас достаточно. Это то, как я ее узнал.) Каждая функция преобразования, за исключением matrix() и matrix3d ​​(), имеет эквивалентное значение матрицы. Для scale3d матрица:

Где sx, sy и sz — коэффициент масштабирования относительно осей x, y и z. Для scaleZ это то же самое, но sx и sy равны 1.

При применении преобразования браузер берет координаты для каждой вершины объекта (в не-nerd говорят: берет координаты для каждого угла окна) и умножает его на матрицу преобразования. Произведением этого становится новые координаты для объекта. Например, математика transform: scaleZ(3) для объекта, начинающегося с (100,50,0), выглядит примерно так:

Этот продукт, [100 50 0 1] при переводе в трехмерную систему координат становится тем, с чего мы начали: (100,50,0). В результате получается, что преобразование не применялось. Для того чтобы преобразование с использованием scaleZ() получило эффект, третье число в произведении матрицы и вектора должно быть больше нуля. Обычно это происходит, когда scaleZ() или scale3d() применяются к родительскому элементу или используются в сочетании с другой функцией преобразования. В обоих случаях суммарная/текущая матрица преобразования приводит к координате Z, значение которой больше нуля. Вот пример с использованием transform: rotateY(30deg) scaleZ(3) . Сначала нам нужно умножить матрицу на rotateY(30deg) на матрицу для scaleZ(3) .

Тогда мы можем умножить наше матричное произведение (это бит справа от знака равенства) нашей точкой в ​​точке (100,50,0).

Наш продукт [86,6 50 49,9 1] работает в координатах (87, 50, 50), если мы округлим до целых чисел. И эта вторая 50 — наша координата Z. Преобразование имеет заметный эффект.

Translate, scale в CSS3

Здравствуйте, дорогие мои читатели. Помните я как-то писал статью про куб на CSS3. Сегодня мы тоже будем строить куб, но в отличие от предыдущего я не буду использовать поворот граней с помощью свойства skew. Вместо этого я использую две функции трансформации translate и rotate. А потом мы попробуем увеличить наш куб при наведении с помощью функции масштабирования — scale.

Давайте для начала выясним что же за функция такая translate? Эта функция трансформирования объекта позволяет его передвигать относительно 3-х осей координат. Имеет следующий синтаксис:

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

Ну что ж давайте создадим наш новый куб.

Здесь я использовал два новых свойства:perspective-origin и transform-style: preserve-3d. Первое определяет, где будет располагаться наш объект на осях X, Y, а второе определяет, как будут располагаться дочерние элементы.

Без свойства perspective-origin мы увидим неясную картинку куба. По умолчанию perspective-origin:50% 50%. Из кода выше можно догадаться, что мы строим куб размером 150*150*150. Со сторонами:

  • 1,2 — передняя, задняя;
  • 3,4 — верхняя, нижняя;
  • 5,6 — левая, правая.

Общие свойства сторон мы задаём при помощи класса side. В результате должно получиться следующее: куб 3D. Давайте попробуем увеличить наш куб при наведении при помощи функции scale3d:

По аналогии с translate общий синтаксис для этой функции будет следующим:

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

Все права на сайт принадлежат Александру Побединскому.

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

Свойство CSS transform

Свойство CSS transform (от слова «трансформация») позволяет видоизменять элемент на html-страницах. Например, можно

  • вращать
  • смещать
  • изменять масштаб
  • наклонять
  • комбинировать выше описанные действия

Благодаря этому свойству можно создавать интересные эффекты без применения JavaScript, что позволяет ускорять работу браузера. Важно так же отметить, что есть возможность кобминировать эффект с временными задержками.

1. Синтаксис CSS transform

Допускается одновременно несколько действий с объектом (например, вращать, сместить и изменить масштаб).

Примечание про браузеры

Не все браузеры поддерживают трансформацию. Необходимо использовать вендорные префиксы CSS:

  • -ms-transform — для IE9 и старше (младше девятой версии трансформация не поддерживается
  • -webkit-transform — для Chrome, Safari, Andro >-o-transform — для Opera до версии 12.10
  • -moz-transform — для Firefox до версии 16.0

2. transform:rotate(x) — вращение объекта

Чтобы вращать элемент существует команда rotate(x) . Она позволяет повернуть объект на x градусов по часовой или против часовой стрелке. Значение х нужно указывать в градусах deg

Пример #1. Вращение объекта в html через трансформацию

На странице преобразуется в следующее

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

Пример #2. Вращение объекта в html при наведении курсора

Создадим класс kvadrat2 и пропишем для него псевдокласс :hover , в котором и будет прописано вращение и смена цвета на более светлый (с #444 на #888).

На странице преобразуется в следующее

Но это вращение происходит резко и не смотрится «эффектно». Это можно легко исправить сделав сглаживание. В следующем примере будет реализована анимация.

Пример #3. Плавное вращение при наведении курсора (анимация) в html

Для плавного вращения (или другими словами сглаживания) необходимо прописать еще одно свойство transition. Это свойство отвечает за время и эффект сглаживания. В данном примере рассматривается самый простой случай с переходом за 1 секунду с линейной скоростью linear

На странице преобразуется в следующее

Стало гораздо симпатичнее и такая анимация дает множество возможностей для создания эффектов на сайте только за счет CSS.

3. transform:translate(x,y) — смещение объекта

Следующей командой, которую мы рассмотрим это команда для перемещения объекта translate(x,y) , где аргументы в скобках — смещение по оси Х и У соответственно.

Пример #4. Смещение объектов в html через трансформацию

На странице преобразуется в следующее

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

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: translateX(x) — смещение по Х, translateY(y) — смещение У.

4. transform:scale(x,y) — масштабирование объекта

Команда для масштабирования объекта scale(x,y) , где аргументы в скобках — масштабирование по осям Х и У соответственно.

Пример #5. Масштабирование объектов в html

На странице преобразуется в следующее

При наведении квадрат становится больше по горизонтали на 50% (коэффициент 1.5), а по вертикали на 30% (коэффициент 1.3). Значение 1 означает отсутствие масштабирования. Все что меньше 1, будет означать уменьшение объекта.

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: scaleX(x) — масштабирование по Х, scaleY(y) — масштабирование по У.

5. transform:skew — наклон объекта

Команда для наклона объекта skew(x,y) , где аргументы в скобках — наклон по осям Х и У соответственно. Наклон необходимо указывать в градусах deg .

Пример #6. Наклон объектов в html

На странице преобразуется в следующее

При наведении квадрат трансформируется в ромб благодаря наклону.

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: skewX(x) — наклон по Х, skewY(y) — наклон по У.

6. Комбинирование значений transform

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

Пример #7. Комбинирование значений transform

Исходное значение: квадрат с черной рамкой. При наведении на него он вращаясь превратится в круг с красной рамкой и изменит цвет.

На странице преобразуется в следующее

7. Другие значения transform

Мы рассмотрели самые основные значения transform . Рассмотрим остальные возможности.

  • none — отсутствие преобразований (по умолчанию включено оно);
  • matrix(x,x,x,x,x,x) — преобразование 2D с помощью матрицы из 6 значений;
  • matrix3d(x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x) — преобразование 3D с помощью матрицы из 16 значений;
  • translate3d(x,y,z) — перемещение 3d (по сравнению с обычным перемещением, здесь добавлена еще третья координата);
  • scale3d(x,y,z) — масштабирование в 3d (по сравнению с обычным масштабированием, здесь добавлена еще третья координата);
  • rotate3d(x,y,z) — вращение в 3d (по сравнению с обычным вращением, здесь добавлена еще третья координата);
  • rotateX(x) — 3d вращение по оси X;
  • rotateY(x) — 3d вращение по оси Y;
  • rotateZ(x) — 3d вращение по оси Z;
  • perspective(n) — перспектива для преобразования 3D элемента;

В JavaScript свойство CSS transform доступно по следующим свойствам:

Возможно, вы зададите вопрос «а зачем вообще использовать transform, когда можно просто изменять данные объекта как нам нужно. Например, изменив размеры объекта?» Разница в том, что свойств transform при трансформации никак не сдвигает другие элементы на странице. В случае же простого изменения размеров объекта это неминуемо приводит к сдвигу соседних объектов вокруг, что, как правило, некрасиво.

Transform CSS Generator: Scale, Rotate, Translate and Skew

Use the sliders to set the transform CSS properties for your stylesheet.

Set the scale, rotate, translate, and skew and watch the live preview to get the desired view.
Avoid setting extreme values for the skew property because the preview might cover the settings panel. In this situation you will have to refresh the page.

Scale, Rotate, Translate and Skew

Scale works like you would zoom in and out the targeted element. The default scale value is 1, which works as a multiplier of the original size. This means that 0.5 halves while 2 doubles the section.

Rotate the element clockwise with the second property that’s set in degrees. Turning with 180° puts the object upside down while 360° takes is back to its original upright position. Set any positive or negative value or even decimals.

Translate shifts the element with pixels related to its original position. The X value horizontally while Y vertically when there rotate attribute is zero.

Skew the objects on their horizontal (X) or vertical (Y) axle.

Gradient Generator

Pick the colors and
set the gradient type.

Table Styler

Generate HTML and CSS
for tables and div grids.

Border & Outline

Style the line surrounding
the elements in your doc.

Box Shadow

Generate box-shadow
with the desired options.

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

Трансформация объектов доступна в таких дизайнерских программах, как 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 значения через запятую в скобках:

Также часто применяют масштабирование элементов вместе с анимацией (так называемые 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() для горизонтального и вертикального смещения:

Что делает функция преобразования scaleZ() CSS? — css

Я пытаюсь превратить мой крошечный мозг в 3D-преобразования CSS, и у меня возникли проблемы с пониманием функции scaleZ() .

scale() , scaleX() и scaleY() имеют смысл: они растягивают элемент вдоль указанной оси, умножая его размер вдоль этой оси на число, которое вы предоставляете.

Но scaleZ() кажется другим:

  • Это относится к дочерним элементам элемента
  • Он не влияет на размеры дочерних элементов, поскольку элементы HTML не имеют никакого размера вдоль оси z (т.е. вы не можете сделать

[ scaleZ() ] влияет на масштабирование вдоль оси z в преобразованных дочерних элементах.

Я не могу понять, что это на самом деле означает на практике. Может ли кто-нибудь дать объяснение, желательно с некоторым примером кода?

    1 4
  • 8 окт 2020 2020-10-08 10:13:24
  • Paul D. Waite

4 ответа

Apples Safari CSS Руководство по визуальным эффектам объясняет scaleZ() как это:

Вы можете изменить систему координат потомков элементов, масштабируя ось z, так что расстояния вдоль оси z больше или меньше. Это масштабирование влияет только на потомки элементов, а масштабирование требует включения трехмерных преобразований, поэтому масштабирование по оси z требует по крайней мере двух 3D-слоев. [Акцент мой]

Итак, как я понимаю, когда:

  • У вас есть два 3D-слоя, а
  • внутренний имеет scaleZ() , примененный к нему

тогда, когда потомки внутреннего слоя применяют к ним 3D-преобразования, их перемещение вдоль оси z будет умножено на значение, которое вы передали на scaleZ() . Или что-то.

Ive вывел пример в JSFiddle. Если вы удалите -webkit-transform: scaleZ(3); , синий синь помещается внутри серого окна, потому что он не так сильно перемещается вдоль оси z. (Я думаю.)

  • 8 окт 2020 2020-10-08 10:13:25
  • Paul D. Waite

Я смутился об этом в течение долгого времени, хотя экспериментировал, я считаю, что это довольно легко понять:

Предположим, что элемент позиционируется 100px на оси Z, заставляя его перемещаться к зрителю, например:

И затем вы масштабируете ось Z на два:

Его размеры не затрагиваются, как вы говорите, но теперь он будет такого же размера, как если бы он был translateZ(200px) . scaleZ(2) translateZ(400px) является эквивалентом translateZ(800px) и т.д.

Не думайте, что scaleZ() влияет на элемент, а вместо этого на ось Z, на которой находится элемент.

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

  • 8 окт 2020 2020-10-08 10:13:25
  • Ian Lunn

на веб-странице X, Y & Z есть three views , как например z-index , так как это то же самое scaleZ() .

Проверьте, что w3c say

EDIT:

ваша скрипка все еще не объясняет, что такое scaleZ() , потому что мы также можем получить этот эффект от scaleY() .

Теперь в моем примере скрипта вы можете 3rd digit box выглядеть как 3D means с scaleX(),scaleY() & scaleZ() и 2nd digit box похожими на 2D, потому что они масштабируют только scaleX() и scaleY().

  • 8 окт 2020 2020-10-08 10:13:25
  • sandeep

Кажется глупым ответить на вопрос через два года после его запроса, но опубликовать его для потомков.

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

Это легко объяснить, но немного сложно понять, если у вас нет математического фона. (Но ценность в Википедии в выходные и поисковые запросы Google научит вас достаточно. Это то, как я ее узнал.) Каждая функция преобразования, за исключением matrix() и matrix3d ​​(), имеет эквивалентное значение матрицы. Для scale3d матрица:

Где sx, sy и sz — коэффициент масштабирования относительно осей x, y и z. Для scaleZ это то же самое, но sx и sy равны 1.

При применении преобразования браузер берет координаты для каждой вершины объекта (в не-nerd говорят: берет координаты для каждого угла окна) и умножает его на матрицу преобразования. Произведением этого становится новые координаты для объекта. Например, математика transform: scaleZ(3) для объекта, начинающегося с (100,50,0), выглядит примерно так:

Этот продукт, [100 50 0 1] при переводе в трехмерную систему координат становится тем, с чего мы начали: (100,50,0). В результате получается, что преобразование не применялось. Для того чтобы преобразование с использованием scaleZ() получило эффект, третье число в произведении матрицы и вектора должно быть больше нуля. Обычно это происходит, когда scaleZ() или scale3d() применяются к родительскому элементу или используются в сочетании с другой функцией преобразования. В обоих случаях суммарная/текущая матрица преобразования приводит к координате Z, значение которой больше нуля. Вот пример с использованием transform: rotateY(30deg) scaleZ(3) . Сначала нам нужно умножить матрицу на rotateY(30deg) на матрицу для scaleZ(3) .

Тогда мы можем умножить наше матричное произведение (это бит справа от знака равенства) нашей точкой в ​​точке (100,50,0).

Наш продукт [86,6 50 49,9 1] работает в координатах (87, 50, 50), если мы округлим до целых чисел. И эта вторая 50 — наша координата Z. Преобразование имеет заметный эффект.

Почему так странно работает transform: scale в css?

https://jsfiddle.net/o9b7r1ms/3/
На днях игрался с transform в JSfiddle и заметил такую странную особенность: если указать scale и в wrapper, и в элемент, который зависит от wrapper’а, то получается такая вот ахинея — item’ы начинают почему то крутиться. Обращу внимание что я указал у item’а значение высоты 100%.

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

  • Вопрос задан более года назад
  • 119 просмотров

Это не scale странно работает, а вы transform переопределяете.
было:
transform: rotate(90deg);
после :hover стало:
transform: scale(1, 2);

чтобы rotate сохранить надо так переопределять:
transform: rotate(90deg) scale(1, 2);

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

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

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

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

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

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

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

The Transform CSS Property

Contents

CSS element transformations

By using the CSS transform property, you can modify the look of a 2D or 3D element (e.g., make CSS scale it or rotate it):

There are multiple transform functions you can apply to achieve different results. We will present them in the following section.

Theory is great, but we recommend digging deeper!
Learn HTML5 and CSS3 to Build a Website from Scratch

Stone River eLearning

Transform CSS syntax and property values

The syntax for the transform property is CSS is as follows:

See the table below to get familiar with the available functions:

Function Values Description
none The default value. Determines that there are no CSS transformations
matrix() n,n,n,n,n,n Defines a 2D transformation in a six-valued matrix
matrix3d n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n Defines a 3D transformation in a 4×4 matrix
translate() x,y Defines a 2D translation
translate3d() x,y,z Defines a 3D translation
translateX() x Defines a horizontal translation
translateY() y Defines a vertical translation
translateZ() z Defines a Z-axis translation
scale() x,y Scales a 2D element
scale3d() x,y,z Scales a 3D element
scaleX() x Scales an element horizontally
scaleY() y Scales an element vertically
scaleZ() z Scales an element along the z-axis
rotate() angle Rotates a 2D element by a defined angle
rotate3d() x,y,z,angle Rotates a 3D element by a defined angle
rotateX() angle Rotates an element by a defined angle on the x-axis
rotateY() angle Rotates an element by a defined angle on the y-axis
rotateZ() angle Rotates an element by a defined angle on the z-axis
skew() x-angle,y-angle Skews a 2D element
skewX() angle Skews an element on the x-axis
skewY() angle Skews an element on the y-axis
perspective() n Defines the distance between the viewer and z=0

In this example, we create and rotate elements using the transform CSS property:

Note: you can read more about translate() , translate3d() , translateX() and translateY() in this tutorial.

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