3D-преобразование CSS. В CSS, помимо 2D-преобразования элементов на странице, вы также можете выполнять 3D-преобразование элементов объекта (представьте, что страница — это трехмерное пространство для перемещения, вращения, масштабирования и наклона элементов на странице и т. д.). .). Подобно 2D-преобразованиям, 3D-преобразования не затрагивают окружающие элементы и могут перекрывать другие элементы. Однако преобразованный элемент по-прежнему будет занимать место в своей позиции по умолчанию (до преобразования).
Трехмерная система координат
Давайте сначала разберемся с трехмерной системой координат. Так называемая трехмерная система координат добавляет ось Z к исходной двумерной системе координат, образуя таким образом трехмерное пространство, как показано на рисунке ниже:
①Ось x: горизонтально вправо. Примечание. Правая сторона x — положительное значение, а левая сторона — отрицательное значение.
②Ось y: вертикально вниз. Примечание: y имеет положительные значения внизу и отрицательные значения вверху.
③ Ось Z: вертикальный экран. Примечание. Положительные значения обращены наружу, отрицательные значения — внутрь.
Свойства преобразования
Метод 3D-преобразования
1.translate3d()
Функция Translate3d() используется для перемещения положения элемента в трехмерном пространстве. Характеристика этого преобразования заключается в определении смещения элемента в каждом направлении (ось X, ось Y, ось Z) на три значения. координаты размерного вектора. Синтаксический формат функции следующий:
Translate3d (TX, TY, tz)
Описание параметра следующее:
(1) tx: представляет расстояние, на которое элемент перемещается в горизонтальном направлении (ось X);
(2) ty: представляет расстояние, перемещенное в вертикальном направлении (ось Z) элемента;
(3) tz: указывает расстояние, на которое элемент перемещается по оси Z. Для этого параметра нельзя использовать процентные значения.
2. транслироватьZ()
Функция TranslateZ() используется для перемещения элементов по оси Z трехмерной системы координат. Формат синтаксиса функции следующий:
транслироватьZ(тц);
Параметр tz используется для установки расстояния, на которое элемент перемещается по оси Z.
Совет: TranslateZ(tz); эквивалентно сокращению Translate3d(0, 0, tz);.
3.rotate3d()
Функция Rotate3d() используется для установки угла поворота элемента по оси X, Y или Z. Эта функция будет вращать элемент только вдоль фиксированной оси и не будет деформировать элемент. Синтаксический формат функции Rotate3d() следующий:
вращать3d (х, у, г, а)
Описание параметра следующее:
x: установите координату оси X оси вращения;
y: установите координату оси Y оси вращения;
z: установите координату оси Z оси вращения;
a: Установите угол поворота элемента. Положительный угол означает вращение по часовой стрелке, а отрицательный угол означает вращение против часовой стрелки.
4. масштабировать3d()
Функция Scale3d() может изменять размер (масштабирование) элементов. Синтаксический формат функции следующий:
масштаб3d(sx,sy,sz)
Описание параметра следующее:
sx: представляет коэффициент масштабирования элемента в направлении оси X;
sy: представляет коэффициент масштабирования элемента в направлении оси Y;
sz: указывает коэффициент масштабирования элемента в направлении оси Z.
5.матрица3d()
Функция Matrix3d() очень похожа на функцию Matrix(), которую мы изучили ранее, но функция Matrix3d() может использовать матрицу 4 × 4 для описания трехмерного (3D) преобразования. Все операции 3D-преобразования можно выполнить одновременно с помощью функции array3d(). Синтаксический формат функции следующий:
матрица3d(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4)
Описание параметра следующее:
a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, d4: используются для описания различных 3D-преобразований;
a4, b4, c4: указывает степень преобразования элемента.
Пример:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1. 0><title>Документ</title><style>.box1{perspective:500px;}.box{position:relative;width:200px;height:200px;margin:100pxauto;transition:all2s;/*Оставить подокно 3D пространство Environment*/transform-style:preserve-3d;}.box:hover{transform:rotatey(60deg);}.boxdiv{position:absolute;top:0;left:0;width:100%;height:100%; цвет фона: розовый ;}.boxdiv:last-child{background-color:aquamarine;transform:rotateX(60deg);</style></head><body><div><div><div></div><div> </div></div></div></body></html>Результаты запуска:
