Преобразовать свойство

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

2D трансформация

Matrix

Матрица преобразования 3x3
Преобразование 2D-вектора
Где x1, y1 — векторы, преобразованные Matrix. Из формулы видно, что e, f в Matrix в основном используются для задания перемещения элементов по оси X и оси Y. a, d в основном используются для задания масштабирования элемента по осям X и Y. a,b,c,d используются для установки поворота элемента в плоскости XY.Вращение/перемещение/винт и т. д. могут напрямую достичь того же эффекта, установив Matrix

translate

Установите трансформацию перемещения элемента по оси X или оси Y.

translate(15px, 25px)      #元素沿着 X轴正方向平移 15px，沿着 Y轴正方向平移 25px
Matrix(1, 0, 0, 1, 15, 25) #效果相同

scale

Установите масштаб элемента по оси X или оси Y

scale(2, 0.5)              #元素在 X轴上拉伸一倍，在 Y轴上缩小一倍
Matrix(2, 0, 0, 0.5, 0, 0) #效果相同

Когда параметр масштаба отрицателен, элементы меняются местами в соответствующем направлении.

rotate

В двумерном пространстве rotate вращается вокруг вектора нормали экрана, что эквивалентно rotateZ.
```
rotate(30deg)                         #围绕屏幕法向量顺时针旋转 30度
Matrix(0.866, 0.5, -0.5, 0.866, 0, 0) #效果相同 Sin(30) ≈ 0.866
```

skew

Установите угол наклона осей X и Y.

transform-origin

трансформировать трансформировать происхождение

Значение по умолчанию — (50%, 50%, 0), что означает, что начало преобразования по умолчанию находится в центре плоскости XY Z=0 элемента преобразования.
Значение равно (||left|center|right, ||top|center|bottom, ). Три параметра представляют блочную модель исходной фазы преобразования слева направо. Смещение влево, смещение к верхней части блока и смещение по Z

rotate(30deg);

rotate(30deg);
transform-origin: 'left top';

После установки transform-origin в точку расположения элемента, элемент вращается вокруг верхнего левого угла.

transform Порядок, в котором выполняется каждое преобразование

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

transform: translateX(100px) rotate(90deg);

Результат показан на рисунке ниже.Можно заметить, что желтая рамка в результате перемещается на 100 пикселей вдоль положительного направления оси X, а затем визуализируется на 90 градусов по часовой стрелке вокруг оси Z.Поэтому при трансформации каждое преобразование выполняется последовательно слева направо.

transform:  rotate(90deg) translateX(100px);

Затем мы меняем порядок двух преобразований на обратный, и результат показан на следующем рисунке. Можно обнаружить, что желтый прямоугольник сначала поворачивается на 90 градусов вокруг оси Z, а затем перемещается на 100 пикселей по положительной оси X.

матричные матричные операции

Как видно из предыдущей главы, матрица преобразования translateMat, соответствующая преобразованию перевода translateX(100px) в этой главе, имеет вид

\begin{bmatrix} {1}&{0}&{100}\\ {0}&{1}&{0}\\ {0}&{0}&{1}\\ \end{bmatrix}

Матрица преобразования rotateMat, соответствующая повороту (90 градусов), равна

\begin{bmatrix} {0}&{-1}&{0}\\ {1}&{0}&{0}\\ {0}&{0}&{1}\\ \end{bmatrix}

Выполните операцию матричного продукта для translateMat и rotateMat и импортируйте результат операции в свойство преобразования, чтобы просмотреть результат.

rotateMat * translateMat
Результат

\begin{bmatrix} {0}&{-1}&{0}\\ {1}&{0}&{100}\\ {0}&{0}&{1}\\ \end{bmatrix}

CSS-кодtransform: matrix(0, 1, -1, 0, 0, 0), результат выполнения показан на рисунке ниже, видно, что эффект преобразования установки матрицы, равной rotateMat * translateMat, эквивалентенtransform: rotate(90deg) translateX(100px);

3D трансформация

Трехмерная мировая система координат CSS3 показана на рисунке ниже с использованием левосторонней системы координат, а направление оси Y идет вниз по экрану.

perspective

перспектива определяет расстояние между 3D-элементом и видом. Устанавливает расстояние от перспективной линзы до плоскости XY

перспектива задает точку перспективы на экране и (расстояние от плоскости Z=0 в пространстве XYZ), то есть положение точки перспективы равно (0, 0, 150px)
```
<!DOCTYPE html>
<html>
    <head>
        <style>
        #div1
        {
            position: relative;
            height: 150px;
            width: 150px;
            margin: 50px;
            padding:10px;
            border: 1px solid black;
            -webkit-perspective:150; /* Safari and Chrome */ #设置 perspecctive 为 150px
        }
        
        #div2
        {
            padding:50px;
            position: absolute;
            border: 1px solid black;
            background-color: yellow;
            -webkit-transform: rotateX(45deg); /* Safari and Chrome */
        }
        </style>
    </head>

    <body>
        <div id="div1">
          <div id="div2">HELLO</div>
        </div>
    </body>
</html>
```
результат:
Установка перспективы на 1500 пикселей приводит к:
Значение перспективы никак не связано с размером элемента.Перспектива представляет собой расстояние от точки перспективы до элемента.Чем дальше точка перспективы, тем хуже будет эффект перспективы.
Элемент с добавленным атрибутом перспективы, после добавления в сцену появляется ось Z, поэтому его дочерние элементы получают 3D-эффекты, в том числе translateZ и rotateY/rotateX

translateZ

Добавляя свойство translateZ к преобразованию, можно добиться перемещения элемента по оси Z.
1. Добавьте translateZ в свойство преобразования дочернего элемента добавленного элемента перспективы.
```
<!DOCTYPE html>
<html>
    <head>
        <style>
        #div1
        {
            position: relative;
            height: 150px;
            width: 150px;
            margin: 50px;
            padding:10px;
            border: 1px solid black;
            -webkit-perspective:150; /* Safari and Chrome */ #设置 perspecctive 为 150px
        }
        
        #div2
        {
            padding:50px;
            position: absolute;
            border: 1px solid black;
            background-color: yellow;
            -webkit-transform: translateZ(-50px) rotateX(45deg); /* Safari and Chrome */
        }
        </style>
    </head>

    <body>
        <div id="div1">
          <div id="div2">HELLO</div>
        </div>
    </body>
</html>
```
  Добавлен translateZ(-50px) к элементу с id=div2, который переводит элемент на 150px по отрицательной оси Z, результат такой:
  Трехмерная система координат в CSS3 использует левостороннюю систему координат, а ось Z перпендикулярна экрану наружу, поэтому после перемещения div2 на 50 пикселей по отрицательной оси Z элементы внутри фактически располагаются на 50 пикселей позади. экран, поэтому он выглядит иначе.

rotateY/rotateX

rotateY и rotateX могут настроить элемент на вращение вокруг оси Y или оси X.
```
rotateY(45deg) #围绕 Y轴顺时针旋转 45 度
rotateX(-45deg) #围绕 Z轴逆时针旋转 45 度
```

Matrix3D

TODO