CSS 3 2D-преобразования - httpdoc.ru

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

CSS3 2D трансформации собственности вы можете rotate , move , skew и scale элементы. Это эффект , который изменяет shape , size и position элемент. Преобразования запускаются при таких событиях, как наведение курсора или щелчок мышью.

Элементы 2D-преобразований

Преобразованный элемент не мешает окружающим его элементам, он может перекрывать их. Элемент просто занимает свое собственное пространство, указанное ему перед преобразованием.

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


Функция translate ()

Таким образом, функция может преобразовать элемент из его текущего положения в новое положение по осям X и Y. Это можно записать как translate(x-axis px, y-axis px) . Пример поможет вам понять, как работает это свойство.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS3 translate() Method </title> 
  <meta charset="UTF-8">  
<style>
.square {
  background: #00aa9d;
  border-radius: 3px;
  height: 150px;
  margin: 100px;
  position: absolute;
  transition: transform 0.8s;
  width: 150px;
}

.square1 {
  background: #2b3f53;
  border-radius: 3px;
  height: 150px;
  margin: 100px;
  transition: transform 0.8s;
  position: absolute;
  width: 150px;
}
.square1:hover {
  transform: translate(20px, 20px);
}
</style>
</head>
<body>
  <div class="square"></div>
  <div class="square1"></div>
</body>
</html>

Выход

CSS3 translate() Method

Функция scale ()

В scale() функции увеличивает или уменьшает размер элемента в соответствии с заданными значениями для параметров ширины и высоты в функции. Это можно записать как scale(2,0.5) . Значение 2 преобразует горизонтальную длину в 2 раза по сравнению с исходным размером. Значение 0,5 преобразует длину по вертикали в половину от исходного размера.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS3 scale() Method </title>
  <meta charset="UTF-8">
<style>
  .square {
    background: green;
    border-radius: 5px;
    height: 100px;
    margin:50px 50px;
    transition: transform 3s;
    width: 100px;
}
  .square:hover {
      transform: scale(2);
    }
</style>
</head>
<body>
    <div class='square'></div>
</body>
</html>

Выход

CSS3 scale() Method

Примечание: Вы можете использовать свойство сокращенную масштабировать как ось одновременно: transform: scale(2) .

Функция rotate ()

rotate() Функция поворачивает элемент по часовой стрелке или против часовой стрелки в соответствии с заданной степенью. Он записывается как rotate(deg) .

Положительное значение, такое как 60 градусов, будет вращать элемент на 60 градусов по часовой стрелке, а отрицательное значение, такое как -60 градусов, будет вращать элемент на 60 градусов против часовой стрелки.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS3 rotate() Method </title> 
  <meta charset="UTF-8"> 
<style>
 .droplet {
  background: green;
  border-radius: 2% 50%;
  height: 100px;
  margin: 100px;
  transition: all 3s;
  transition-timing: ease-in-out;
  width: 100px;
}
.droplet:hover {
  transform: rotate(1080deg);
}
</style>
</head>
<body>
  <div class="droplet"></div>
</body>
</html>

Выход

CSS3 rotate() Method

Функция skew ()

skew() Функция перекосы элемент вдоль X и оси Y на заданные углы. Он записывается как skew (x deg, y deg). Если y deg не указан, он имеет нулевое значение.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS3 skew() Method </title> 
  <meta charset="UTF-8"> 
<style>
.square {
  background: #062984ad;
  border-radius: 5px;
  height: 150px;
  margin: 100px;
  transition: transform 1s;
  width: 150px;
  }
  .square:hover {
    transform: skewX(-20deg);
  }
}
  
</style>
</head>
<body>
  <div class="square"></div>
</body>
</html>

Выход

CSS3 skew() Method

Функция transform-origin

transform-origin Функция позволяет изменить положение трансформированных элементов. Это позволяет вам указать исходную точку местоположения преобразования. По умолчанию начало координат находится в центре элемента.

Например, если вы используете свойство поворота, но хотите, чтобы оно вращалось от верхнего левого угла, а не от центра, вы можете использовать значение 0% 0% или левый верхний угол. Вы можете попробовать манипулировать значениями и посмотреть, как это изменится в результате.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS3 2D transform-origin </title> 
  <meta charset="UTF-8"> 
<style>
.move {
  background: purple;
  border-radius: 5px 50%;
  height: 100px;
  margin: 150px auto;
  transform-origin: left top;
  transition: transform 3s;
  width: 100px;
}
.move:hover {
  transform: rotate(500deg);
}
</style>
</head>
<body>
  <div class="move"></div>
</body>
</html>

Выход

CSS3 2D transform-origin