Как использовать свойство преобразования CSS.

От цветов и до макетов сетки и каруселей – CSS определяет, как выглядит ваш веб-сайт и насколько он понравится вашим посетителям. Вот почему так важно освоить этот язык и, если у вас есть время, сопутствующий фреймворк, такой как Bootstrap CSS.

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

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

Что такое свойство преобразования CSS?

Свойство преобразования CSS изменяет форму, положение и ориентацию элементов страницы. Значения свойства CSS transform – это функции, которые преобразуют целевой элемент, включая translate(), scale () и rotate ().

Правило преобразования CSS записывается следующим образом:

transform: value(argument); 

… где значение – это тип преобразования, а аргумент – это степень применения преобразования. Обратите внимание, что некоторые объявления преобразований могут принимать несколько аргументов.

Но это объяснение мало что значит без примеров свойства transform в действии, поэтому давайте рассмотрим некоторые из них.

2D преобразования CSS

Преобразования CSS можно разделить на две категории: двухмерные и трехмерные. Сначала мы рассмотрим двумерные преобразования. Двумерные преобразования CSS работают по осям X (по горизонтали) и Y (по вертикали).

В своих примерах я применю эффекты преобразования к базовому квадратному элементу div. Синий div представляет собой непреобразованный элемент, а оранжевый div показывает тот же элемент с примененным эффектом преобразования.

CSS Transform: Translate

Метод translate () переводит или перемещает элемент страницы вверх, вниз, влево и / или вправо на странице на указанную величину. В скобках первое число указывает расстояние по горизонтали, а второе число указывает расстояние по вертикали.

Например, мы можем перевести наш div на количество пикселей:

transform: translate(100px, 75px); 

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

transform: translate(100%, 50%); 

Помимо translate (), у нас также есть методы translateX () и translateY (). translateX () перемещает элемент только по горизонтали и принимает один аргумент:

transform: translateX(100px); 

Точно так же метод translateY () перемещает элемент по вертикали. Также требуется всего один аргумент:

transform: translateY(100px); 

Преобразование CSS: Масштаб

Метод scale () изменяет размер целевого элемента. Если мы предоставим один аргумент, это увеличит или уменьшит размер нашего div на кратное его исходному размеру:

transform: scale(2); 

transform: scale(0.75); 

Если мы предоставим два аргумента (разделенных запятой), первый аргумент задает горизонтальное масштабирование, а второй – вертикальное масштабирование:

transform: scale(4, 2); 

Метод scaleX () изменяет только горизонтальное масштабирование элемента. Требуется один аргумент:

transform: scaleX(2); 

scaleY () делает то же самое, что и scaleX (), но по вертикали:

transform: scaleY(2); 

Преобразование CSS: поворот

Функция rotate (), как вы могли догадаться, вращает элемент. По умолчанию элемент будет вращаться вокруг своего центра. Мы можем указать вращение в градусах, радианах или поворотах (от 0 до 1 ):

transform: rotate(45deg); 

transform: rotate(0.75turn); 

Преобразование CSS: перекос

Метод skew () наклоняет или наклоняет элемент по его осям X и / или Y. Его аргументы определяют горизонтальный и вертикальный угол наклона соответственно.

transform: skew(50deg, -15deg); 

skewX () наклоняет наш div только по горизонтальной оси, а skewY () делает то же самое только по вертикальной оси:

transform: skewX(50deg); 

transform: skewY(50deg); 

Объединение преобразований 2D CSS

Если вы хотите применить несколько преобразований к одному и тому же селектору CSS, вам не нужно несколько объявлений преобразований. Вместо этого вы можете объединить несколько значений преобразования CSS в одно объявление, просто перечислив их с пробелом между каждым из них:

transform: translate(100px, 20px) scale(0.8) rotate(30deg); 

3D CSS Transformations

Трехмерные преобразования CSS включают ось Z. Если представить себе ширину и высоту экрана как оси X и Y соответственно, ось Z – это «глубина» экрана.

Вот несколько способов трансформировать элементы, чтобы добавить глубины:

Преобразование CSS: перспектива

Значение перспективы () устанавливает глубину элемента по оси Z. Он переключает, насколько «близко» или «далеко» отображается элемент. Перспектива () используется вместе с другими методами трехмерного преобразования, как мы увидим далее.

Преобразование CSS: rotateX () и rotateY ()

Как и rotate (), значения rotateX () и rotateY () вращают наш div, но «вокруг» осей X и Y:

transform: rotateX(130deg); 

transform: rotateY(130deg); 

Когда эти методы используются с перспективой (), кажется, что повернутый элемент поворачивается к нам:

/* first image */ transform: perspective(500px) rotateY(40deg); /* second image */ transform: perspective(500px) rotateY(60deg); /* third image */ transform: perspective(500px) rotateY(80deg); 

translateZ ()

При использовании с точки зрения (), то translateZ () создает эффект движущегося элемента вперед или назад по оси Z.:

transform: perspective(500px) translateZ(200px) ; 

Свойство CSS transform-origin

transform-origin – еще одно свойство CSS, которое можно использовать с преобразованием. Свойство transform-origin изменяет положение начала координат, точку, в которой начинается преобразование или где оно базируется.

Наиболее наглядно это демонстрируется с помощью метода rotate (): мы можем использовать transform-origin для перемещения центральной точки вращения:

transform: rotate(45deg); transform-origin: top left; 

transform: rotate(45deg); transform-origin: bottom left; 

transform: rotate(45deg); transform-origin: center right; 

Начало координат также можно указать в пикселях от верхнего левого угла исходного элемента:

transform: rotate(45deg); transform-origin: 75px 150px; 

CSS-анимации преобразования

Все наши примеры до сих пор были статичными … но мы можем добиться большего. Любой метод преобразования CSS можно комбинировать с переходами CSS для создания классных эффектов анимации CSS.

Например, мы можем закодировать интерактивную кнопку наведения с помощью метода scale () :

div { transition: transform 0.5s; } div:hover { transform: scale(1.1); cursor: pointer; } 

… или создайте эффект вертушки с помощью функции rotate () :

div { transition: transform 2s; } div:hover { transform: rotate(720deg); } 

Давайте рассмотрим

Мы многое рассмотрели, поэтому давайте вернемся к всему, что мы узнали:

• transform: свойство CSS для изменения формы, положения и ориентации элементов страницы. Может принимать одно или несколько из следующих значений:
  • translate (): перемещает элемент на страницу
  • translateX (): перемещает элемент по горизонтали на странице
  • translateY (): перемещает элемент по вертикали на странице
  • translateZ (): перемещает элемент по оси Z «в сторону» или «в сторону» от пользователя.
  • scale (): увеличивает / уменьшает размер элемента
  • scaleX (): увеличивает / уменьшает ширину элемента
  • scaleY (): увеличивает / уменьшает высоту элемента
  • rotate (): вращает элемент (по умолчанию вокруг его центра)
  • rotateX (): вращает элемент вокруг оси X
  • rotateY (): вращает элемент вокруг оси Y
  • skew (): наклоняет форму элемента
  • skewX (): наклоняет форму элемента по горизонтали
  • skewY (): наклоняет форму элемента по вертикали
  • перспектива (): при использовании со значением трехмерного преобразования создает видимость элемента, движущегося к / от пользователя
• transform-origin: Свойство CSS, используемое с преобразованием для изменения источника преобразования.
• переход: свойство CSS для управления скоростью анимации. Его можно использовать с преобразованием для анимации элементов страницы.

Комбинируя эти мощные техники, вы можете многое сделать – поэкспериментируйте и посмотрите, что у вас получится!

И помните, каких бы крутых эффектов вы ни добились, убедитесь, что они в конечном итоге служат пользователю, улучшая работу в Интернете, а не отвлекая его.

Источник записи:

• статьи о wordpress, web