scaleY() в 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

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 transform Свойство

Пример

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

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

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

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

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

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

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

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

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

Синтаксис

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

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

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

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

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

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

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 общий синтаксис для этой функции будет следующим:

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

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

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

Функция 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().

CSS свойство transform

Определение и применение

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

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

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

Подробное описание функции вы можете получить здесь(на русском), либо в оригинале — разделы 20 и 21. matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Определяет трехмерное преобразование с помощью матрицы 4×4 из шестнадцати значений в порядке столбцов. Все другие трехмерные функции преобразований основаны на функции matrix3d . Подробное описание функции вы можете получить здесь(на русском), либо в оригинале — разделы 20 и 21. translate(x,y) Определяет двухмерное преобразование путем сдвига элемента влево, вправо, вверх или вниз, используя координаты по оси x и y(отрицательные значения отвечают за сдвиг влево и вверх, положительные за сдвиг вправо и вниз). Элемент, к которому применяется сдвиг не влияет на поток документа. translate3d(x,y,z) Задает трехмерное преобразование путем сдвига элемента, используя координаты трёх осей. translateX(x) Определяет двухмерное преобразование путем сдвига элемента, используя только значение по оси x. translateY(y) Определяет двухмерное преобразование путем сдвига элемента, используя только значение по оси y. translateZ(z) Определяет трехмерное преобразование путем сдвига элемента, используя только значение по оси z. scale(x,y) Определяет двухмерное преобразование путем масштабирования элемента по оси x и по оси y. Допускается использование одного значения, в этом случае элемент масштабируется с указанным значением как по оси x, так и по оси y. К примеру, значение scale(0.5) уменьшит элемент в 2 раза (как по оси x, так и по y). Другими словами, значения больше одного при масштабировании увеличивают элемент, меньше одного — уменьшают. При использовании отрицательных значений элемент отображается зеркально. Масштабируемый элемент увеличивается, либо уменьшается относительно своего центра (допускается изменить исходную точку преобразования, установленную по умолчанию, задействовав свойство transform-origin ). scale3d(x,y,z) Определяет трехмерное преобразование путем масштабирования элемента по оси x, y и по оси z. scaleX(x) Определяет двухмерное преобразование путем масштабирования элемента, используя только значение по оси x. scaleY(y) Определяет двухмерное преобразование путем масштабирования элемента, используя только значение по оси y. scaleZ(z) Определяет трехмерное преобразование путем масштабирования элемента, используя только значение по оси z. rotate(angle) Задает двухмерный поворот по часовой стрелке, либо против часовой стрелки при использовании отрицательных значений. Элемент поворачивается относительно своего центра (допускается изменить исходную точку преобразования, установленную по умолчанию, задействовав свойство transform-origin ).

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

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

6.28rad).

Например, прямой угол составляет 90deg или 100grad или 0.25turn или примерно

1.57rad. rotate3d(x,y,z,angle) Задает трехмерный поворот по часовой стрелке, либо против часовой стрелки при использовании отрицательных значений. Элемент поворачивается под углом, задаваемым последним параметром относительно вектора направления. Первые три параметра определяют, вокруг какой из осей координат будет вращаться объект (x, y, z), а последний параметр определяет на сколько градусов. Значения X, Y и Z должны задаваться в виде чисел (соотношение углов). Например, rotate3d(2, 1, 0, 50deg) заставит объект повернуться на 50 градусов по оси X и на (50 * 1 / 2) градусов вокруг Y. rotateX(angle) Определяет трехмерное преобразование путем поворота элемента по часовой стрелке, либо против часовой стрелки (при использовании отрицательных значений), используя только значение по оси x. rotateY(angle) Определяет трехмерное преобразование путем поворота элемента по часовой стрелке, либо против часовой стрелки (при использовании отрицательных значений), используя только значение по оси y. rotateZ(angle) Определяет трехмерное преобразование путем поворота элемента по часовой стрелке, либо против часовой стрелки (при использовании отрицательных значений), используя только значение по оси z. skew(x-angle,y-angle) Определяет двухмерное преобразование путем наклона элемента относительно осей x и y. Допускается указывать только одно значение, в этом случае наклон элемента произойдет только по оси x. Элемент поворачивается относительно своего центра (допускается изменить исходную точку преобразования, установленную по умолчанию, задействовав свойство transform-origin ). При использовании отрицательных значений элемент будет наклоняться зеркально. skewX(angle) Определяет двухмерное преобразование путем наклона элемента относительно оси x. skewY(angle) Определяет двухмерное преобразование путем наклона элемента относительно оси y. perspective(n) Определяет перспективу обзора элемента, создавая для пользователя иллюзию глубины. Чем больше значение, указанное для функции перспективы, тем дальше от пользователя расположен элемент. Значение должно быть больше нуля. initial Устанавливает свойство в значение по умолчанию. inherit Указывает, что значение наследуется от родительского элемента.

Версия CSS

Наследуется

Анимируемое

Пример использования

Рассмотрим примеры двухмерных преобразований (трансформаций) в CSS:

Пример использования CSS свойства transform(двухмерная трансформация в CSS).

Рассмотрим примеры трехмерных преобразований (трансформаций) в CSS:

Пример использования CSS свойства transform(трехмерная трансформация в CSS).

Рассмотрим пример изменения двухмерного поворота элемента, используя CSS свойство transform , HTML атрибута событий onchange и функции на JavaScript:

Пример использования CSS свойства transform(двухмерный поворот элемента в CSS). CSS свойства

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.

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

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

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

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

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