Про 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, Просмотрите демонстрацию.
Значение по умолчанию: | 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» и поворот рисунков.
Трансформации, переходы и анимации
Трансформации
Одним из нововведений 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 применяет двухмерные или трехмерные трансформации к элементу (функции преобразования элемента). Допускается перечислять несколько функций в одном объявлении (разделённые пробелом).
Поддержка браузерами
Свойство | 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 |
Значения свойства
Значение | Описание |
---|---|
none | Указывает, что к элементу не применяется никакой трансформации. Это значение по умолчанию. |
matrix(n,n,n,n,n,n) | Определяет двухмерное преобразование с помощью матрицы из шести значений. |
Подробное описание функции вы можете получить здесь(на русском), либо в оригинале — разделы 20 и 21.
Допускается указывать значения угла в следующих единицах:
- deg — градусы. Оборот окружности составляет 360deg.
- grad — грады. Оборот окружности составляет 400grad.
- rad — радианы. Оборот окружности составляет 2π (
6.28rad).
Например, прямой угол составляет 90deg или 100grad или 0.25turn или примерно
1.57rad.
Версия 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 и процентах. Также для установки точки можно использовать ключевые слова: