Шпаргалка по преобразованию CSS

CSS Transform – это мощная функция, позволяющая управлять положением, размером и формой HTML-элементов. Вот несколько часто используемых методов CSS Transform:

Пример:

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

Пример:

transform: rotate(45deg);

3. scale(): этот метод масштабирует элемент на указанный коэффициент. Вы можете указать отдельные коэффициенты масштабирования для горизонтальной и вертикальной осей.

Пример:

transform: scale(1.5, 0.8);

4. skew(): наклоняет элемент по горизонтальной и вертикальной осям на указанный угол. Угол может быть указан в градусах или радианах.

Пример:

transform: skew(20deg, -10deg);

5. matrix(): этот метод позволяет определить двумерное преобразование с использованием матрицы из 6 значений. Это обеспечивает больший контроль над преобразованием.

Пример:

transform: matrix(1, 0.5, -0.5, 1, 20, 30);

6. perspective(): добавляет к элементу трехмерную перспективу. Этот метод используется в сочетании с другими методами 3D-преобразования.

Пример:

transform: perspective(500px);

7. rotateX(), RotateY(), RotateZ(): эти методы вращают элемент вокруг оси X, Y или Z соответственно. Они используются для 3D-преобразований.

Пример:

transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);

8. scale3d(): этот метод масштабирует элемент в трехмерном пространстве. Вы можете указать отдельные коэффициенты масштабирования для осей X, Y и Z.

Пример:

transform: scale3d(1.5, 1.2, 0.8);

Пример:

10. perspective-origin: это свойство определяет положение точки перспективы для 3D-преобразований.

Пример:

perspective-origin: 50% 50%;