Css трансформации позволяют нам изменять размеры, форму и расположение объекта, не затрагивая при этом остальные элементы, находящиеся рядом.
Существует два вида CSS3 трансформации — 2D и 3D
Синтаксис 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) |
Значение | Описание | Пример |
---|---|---|
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, задавайте вопросы, комментируйте.
Так вы сможете получать новые статьи первыми