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

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

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» и поворот рисунков.

CSS scaleX() Function

The CSS scaleX() function is used to scale elements in a two-dimensional space along the x -axis.

The scaleX() function scales an element based on the number/s that you provide as an argument.

Because it only scales along the x -axis, the element will be distorted if you use it alone (for example, without also using the scaleY() function to scale the y -axis).

Here’s an example of scaling an element using scaleX() :

Removing transform-origin

In the previous example, I use transform-origin to adjust the origin of the transformation. Specifically, I use transform-origin: top left; so that the images don’t overlap as a result of the scaling operation.

The default origin for the rotation is 50% 50% (i.e. the center). Therefore, if we remove this property, the image will transform based on this value.

So here’s an example of what the scale operation might look like when using the default transform-origin value.

Илон Маск рекомендует:  Asp компонент myinfo

Official Syntax

The official syntax of the scaleX() function is as follows:

Possible Values

The scaleX() function accepts number parameters that define the scaling vector for the scale operation.

A is either an integer, or zero or more decimal digits followed by a dot ( . ) followed by one or more decimal digits and optionally an exponent composed of e or E and an integer.

CSS свойство transform

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

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

CSS синтаксис

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

Функция scale масштабирует элемент горизонтально и вертикально. Если указано только одно значение, оно будет использовано сразу и для горизонтального масштабирования и для вертикального. Например, scale(1) оставит элемент такого же размера, scale(2) удвоит его пропорции, scale(0,5) уменьшит элемент в 2 раза. Предоставление различных значений будет искажать элемент.

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

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

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

Одним из нововведений 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 и процентах. Также для установки точки можно использовать ключевые слова:

Функция scale()

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

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

Параметры функции

В качестве параметров функция scale() принимает целые и дробные числа. Для пропорционального масштабирования достаточно указать нужное число в скобках. Так, число выше единицы увеличит масштаб, а число в диапазоне от 0.01 до 0.99 уменьшит его. Число 1 никак не масштабирует элемент, а число 0 приведет к визуальному исчезновению элемента.

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

Отдельные функции для каждой оси

В CSS также имеется набор функций для управления масштабированием каждой из трех осей по отдельности — X, Y и Z. Называются они соответственно:

  • scaleX() — масштабирование по горизонтали X;
  • scaleY() — масштабирование по вертикали Y;
  • scaleZ() — масштабирование по оси Z.

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

Отрицательные числа в параметрах

Вы можете добиться эффекта «отражения в зеркале», если примените отрицательное число в качестве коэффициента масштабирования. При этом флип произойдет даже в том случае, если вы используете -1 (просто не будет эффекта масштабирования):

При использовании свойства transform на практике не забывайте про вендорные префиксы для обеспечения наилучшей кроссбраузерности.

Далее в учебнике: функция наклона skew().

scaleX()

The scaleX() function is used to scale an element up or down, making it bigger or smaller, in the direction of the x-axis.

It takes a unitless sx as a value, which is used to scale the element’s size along the x-axis.

If the value provided is greater than one, the element is scaled up—it will look bigger along the x-axis. If the value is equal to one, the element stays unchanged in that direction. If the value is between zero and one exclusively, the element is scaled down along the x-axis. If the value is zero, the element disappears. Negative values are allowed, but they don’t scale the element. In fact, they cause the transformed element to be flipped horizontally (as if it were rotated along the y-axis)!

See the scale() value in the transform entry to see how a negative value flips an element when applied using scaleX() .

The official syntax looks as follows:

For a better understanding of the transform functions, please refer to the transform entry.

Browser Support

The following is the support table for two-dimensional CSS transformations:

CSS3 2D Transforms

Method of transforming an element including rotating, scaling, etc. Includes support for `transform` as well as `transform-origin` properties.

transform css

transform: scale(2, 2);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Здравствуйте! В этой статье я хочу рассказать о новом свойстве в CSS3 — трансформации. Одним из нововведений 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 и процентах. Также для установки точки можно использовать ключевые слова:

  • left top: левый верхний угол элемента
  • left bottom: левый нижний угол элемента
  • right top: правый верхний угол элемента
  • right bottom: правый нижний угол элемента

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

transform

Easily manage projects with monday.com

The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling:

Even with a declared height and width, this element will now be scaled to twenty times its original size:

Giving this function two values will stretch it horizontally by the first and vertically by the second. In the example below the element will now be twice the width but half the height of the original element:

Or you can be more specific without using the shorthand function:

But scale() is just one of many transform functions that are available:

Values

  • scale() : affects the size of the element. This also applies to the font-size , padding , height , and width of an element, too. It’s also a a shorthand function for the scaleX and scaleY functions.
  • skewX() and skewY() : tilts an element to the left or right, like turning a rectangle into a parallelogram. There is no shorthand skew property.
  • translate() : moves an element sideways or up and down.
  • rotate() : rotates the element clockwise from its current position.
  • matrix() : a function that is probably not intended to be written by hand, but combines all transforms into one.
  • perspective() : doesn’t affect the element itself, but affects the transforms of descendent elements’ 3D transforms, allowing them all to have a consistent depth perspective.

The skewX and skewY transform functions tilt an element one way or the other. Remember: there is no shorthand property for skewing an element, so you’ll need to use both functions. In the example below, we can skew a 100px x 100px square to the left and right with skewX :

Whilst in this example we can skew an element vertically with with skewY :

Rotate

This rotates an element clockwise from its original position, whilst a negative value would rotate it in the opposite direction. Here’s a simple animated example where a square continues to rotate 360 degrees every three seconds:

We can also use the rotateX , rotateY and rotateZ functions, like so:

Translate

This transform function moves an element sideways, or up and down. Why not just use top/left/bottom/right? Well, it’s a bit confusing at times. I would think of those as layout/positioning (they have better browser support anyway) and this as a way to move those things around as part of a transition or animation.

These values would be any length value, like 10px or 2.4em. One value will move the element to the right (negative values to the left). If a second value is provided, that second value will move it down (negative values up). Or, you can get specific:

It’s important to note that an element using transform will not cause other elements to flow around it. By using the translate function below and nudging the green square out of its original position, we’ll notice how the surrounding text will remain fixed in place, as if the square is a block element:

It’s also worth noting that translate will be hardware accelerated if you want to animate that property, unlike position: absolute .

Multiple values

With a space-separated list you can add multiple values to the transform property:

It’s worth noting that there is an order in which these transforms will be carried out, in the example above `skew` will be performed first and then the element will be scaled.

Matrix

The matrix transform function can be used to combine all transforms into one. It’s a bit like transform shorthand, only I don’t believe it’s really intended to be written by hand. There are tools out there like The Matrix Resolutions, which can convert a group of transforms into a single matrix declaration. Perhaps in some situations this can reduce file size, although author-unfriendly micro optimizations like that are likely not worth your time.

For the curious, this:

can also be represented as:

3D Transforms

Most of the above properties have 3D versions of them.

The third value in translate3d or the value in translateZ moves the element toward the viewer, negative values away.

The third value in scale3d or the value in scaleZ affects the scaling along the z-axis (e.g. the imaginary line coming straight out of the screen).

rotateX and rotateY will rotate an element in 3D space around those axises. rotate3d allows you to specify a point in 3D space in which to rotate the element around.

A way to programmatically describe a 3D transform in a 4×4 grid. Nobody will ever hand write one of these, ever.

This value doesn’t affect the element itself, but it affects the transforms of descendent elements’ 3D transforms, allowing them to all have a consistent depth perspective.

Илон Маск рекомендует:  Что такое код ifx_nullformat
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL
Значение Описание
none Трансформация не применяется.
matrix(n,n,n,n,n,n) Применяет 2D трансформцию с помощью матрицы из шести значений.
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Применяет 3D трансформацию с помощью матрицы из шестнадцати (4х4) значений.
translate(x,y) Функция translate позволяет перемещать элементы влево, вправо, вверх или вниз. Эта функция аналогична поведению свойства «position: relative;«. При использовании этой функции, можно сдвигать элементы не влияя на поток документа.
translate3d(x,y,z) Применяет 3D смещение.
translateX(x) Применяет смещение, только по оси Х.
translateY(y) Применяет смещение, только по оси Y.
translateZ(z) Применяет смещение, только по оси Z.
scale(x,y)