CSS трансформации
Css трансформации позволяют нам изменять размеры, форму и расположение объекта, не затрагивая при этом остальные элементы, находящиеся рядом.
Существует два вида CSS3 трансформации — 2D и 3D
2D трансформация
Синтаксис 2D Трансформации
.skewY {
transform: skewY(30deg);
-o-transform: skewY(30deg);
-webkit-transform: skewY(30deg);
-moz-transform: skewY(30deg);
-ms-transform: skewY(30deg);
}
К 2D трансформации можно применять следующие функции:
| Функция | Описание | Пример |
|---|---|---|
| none | Функция none - является функцией по умолчанию. Также она отменяет любую трансформацию, если она была задана ранее. | Функция none |
| translate(x, y) | Позволяет сдвигать элементы одновременно в двух направлениях вверх-вниз, влево-вправо. Если, например, требуется сдвинуть объект вверх и влево, то необходимо применять отрицательные значения. | translate(-10px, -15px) |
| translateX(n) | Позволяет сдвигать элемент вправо при положительном значении, и влево при отрицательном значении | translateX(10px) |
| translateY(n) | Сдвигает объект вверх при отрицательном значении и вниз при положительном | translateY(-10px) |
| scale(x, y) | Данная функция позволяет масштабировать объект по ширине и высоте. Значение от 0 до 1 - делают объект меньше, значение больше 1 увеличивают объект. Отрицательное значение показывает зеркало объекта | scale(1.5, 0.5) scale(-1) |
| scaleX(n) | Функция делает объект шире или сужает его по горизонтали. Если значение меньше единицы, то объект сузится, если больше, то объект увеличится. Если значение отрицательное, то отобразится зеркало объекта по горизонтали. | scaleX(1.5) |
| scaleY(n) | Функция делает объект шире или сужает его по вертикали. Если значение меньше единицы, то объект сузится, если больше, то объект увеличится. Если значение отрицательное, то отобразится зеркало объекта по вертикали. | scaleY(0.8) |
| rotate(ndeg) | Поворачивает объект. Положительное значение - вправо, отрицательное - влево. 720deg - объект повернётся вправо на два оборота и вернётся в исходную позицию. | rotate(720deg) |
| skew(x-угол, y-угол) | Искажает стороны объекта. Если указано одно значение, то второе определит браузер автоматически | skew(20deg) |
| skewX(deg) | Изменяет стороны объекта относительно оси X | skewX(-20deg) |
| skewY(deg) | Изменяет стороны объекта относительно оси Y | skewY(30deg) |
| initial | Устанавливает значение по умолчанию | |
| inherit | Значение унаследуется от родительского элемента | |
| matrix(a, b, c, d, x, y) | Позволяет объединить несколько функций 2D Трансформации в одной. а - изменяет масштаб по горизонтали, b - изменяет стороны объекта по оси X, с - изменяет стороны объекта по оси Y, d - изменяет масштаб объекта по вертикали, x - смещает объект по оси X, y - смещает объект по оси Y | matrix(1,0.5,1.5,1.0, 1.2,1.0) |
Множественная трансформация
Позволяет объединить и применить несколько функций трансформации к одному объекту. Необходимо перечислить их через пробел.
.full:hover {
transform: skew(20deg) rotate(120deg);
-o-transform: skew(20deg) rotate(120deg);
-webkit-transform: skew(20deg) rotate(120deg);
-moz-transform: skew(20deg) rotate(120deg);
-ms-transform: skew(20deg) rotate(120deg);
}
| Множественная трансформация |
|---|
| skew(20deg) rotate(120deg) |
Точка трансформации transform-origin
Данное свойство позволяет сместить центр трансформации. Т.е. Смещается центр, относительно которого происходит трансформация.
| Значение | Описание | Пример |
|---|---|---|
| 50% 50% или center | Смещение трансформации на центр | 50% 50% |
| top left | Смещение трансформации в левый верхний угол | top left |
| 110% 110% | Смещение в нижний правый угол | 110% 110% |
Синтаксис
div {
transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform-origin: 110% 110%;
-o-transform-origin: 110% 110%;
-webkit-transform-origin: 110% 110%;
-moz-transform-origin: 110% 110%;
-ms-transform-origin: 110% 110%;
}
В этой статье было представлены способы 2D трансформации объектов. Если вам понравилась статья или она была вам полезна, то ставьте LIKE, задавайте вопросы, комментируйте.
Подписаться
авторизуйтесь
0 Комментарий