2D-преобразования в CSS позволяют нам выполнять некоторые основные операции преобразования в двумерном пространстве, такие как перемещение, вращение, масштабирование или скручивание и т. д. Преобразованные элементы аналогичны абсолютно позиционированным элементам и не влияют на окружающие элементы, но их можно комбинировать. с перекрытием окружающих элементов. Разница в том, что преобразованный элемент по-прежнему будет занимать пространство на странице до преобразования.
Давайте представим 2D-конвертацию:
1. Переместить перевод()
В соответствии с параметрами, заданными левым (ось X) и верхним (ось Y) положениями, перемещение из текущего положения элемента может изменить положение элемента на странице, аналогично позиционированию.
1. Грамматика:
трансформировать: перевести (х, у);
Или вы можете написать их отдельно
преобразование:translateX(n);transform:translateY(n);
2. Ключевые моменты:
(1) Определите движение в 2D-трансформации и переместите элементы по осям X и Y;
(2) Самым большим преимуществом перевода является то, что он не влияет на положение других элементов;
(3) Процент самого перевода зависит от его собственного элемента перевода (50%, 50%);
(4) Это не влияет на встроенные теги;
Пример:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;transform:translate(100px,10px);</style></head><body ><div></div></body></html>Результаты запуска:
2. Поворот, поворот()
Метод Rotate() поворачивает элемент по часовой стрелке на заданный градус. Допускаются отрицательные значения, что приводит к вращению элемента против часовой стрелки.
Синтаксис: transfrom:rotate (степень поворота)
Ключевые моменты:
поворот (градус), единица измерения — градус. Например: Rotate(45deg);
Если угол положительный, то по часовой стрелке, если отрицательный, то против часовой стрелки;
По умолчанию центральная точка по часовой стрелке является центральной точкой элемента;
Пример:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px20px;transform:rotate(45deg);</style></head> <body><div></div></body></html>Результаты запуска:
3. Трансформация центральной точки 2D-преобразования:
грамматика:
преобразование-происхождение: xy;
Ключевые моменты:
(1) Обратите внимание, что x и y разделены пробелами;
(2) Центральная точка xy по умолчанию — это центральная точка элемента (50% 50%);
(3) Вы также можете установить пиксели или существительные направления для xy (справа слева по центру внизу вверху);
4. Масштаб масштабирования()
Scale(), размер элемента увеличивается или уменьшается в зависимости от параметров ширины (ось X) и высоты (ось Y):
(1) Измените размер элемента, увеличьте или уменьшите его.
(2) Если это отрицательное число, оно будет отменено.
(3) Синтаксический формат функции следующий:
масштаб(sx,sy)
Где sx представляет коэффициент масштабирования в горизонтальном направлении, а sy представляет коэффициент масштабирования в вертикальном направлении. Кроме того, параметр sy можно опустить, а его значение по умолчанию равно sx.
Пример:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;transform:scale(0.7);</style></head><body>< div></div></body></html>Результаты запуска:
5. Перекос()
Содержит два значения параметра, указывающие угол наклона оси X и оси Y соответственно. Если второй параметр пуст, по умолчанию он равен 0. Отрицательное значение параметра означает наклон в противоположном направлении.
(1) skewX(<угол>); означает наклон только по оси X (горизонтальном направлении).
(2) skewY(<угол>); означает наклон только по оси Y (вертикальное направление).
(3) Заставьте элементы наклоняться в разные стороны.
(4) перекос(а) равен перекосу(а,0)
(5)перекос(x,y)
(6) Единичный угол, град
Пример:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px10px;transform:skew(-15deg,20deg);</style>< /head><body><div></div></body></html>Результаты запуска:
6. матрица()
Функцию матрица() можно рассматривать как аббревиатуру нескольких функций: skew(), Scale(), Rotate() и Translate(). Все операции 2D-преобразования могут быть определены одновременно с помощью функции матрица(). синтаксический формат функции следующий:
матрица (a, b, c, d, tx, ty)
Шесть параметров в функции array() соответствуют ScaleX(), skewY(), skewX(), ScaleY(), TranslateX() и TranslateY() соответственно. Вы можете использовать Matrix() для реализации различных 2D-операций. , такой как:
Translate(tx,ty)=matrix(1,0,0,1,tx,ty);：
где tx и ty — значения горизонтального и вертикального перемещения;
Rotate(a)=matrix(cos(a),sin(a),-sin(a),cos(a),0,0);
где а — значение степени. Вы можете обратить вращение, поменяв местами значения sin(a) и -sin(a);
масштаб(sx,sy)=матрица(sx,0,0,sy,0,0);
где sx и sy — значения горизонтального и вертикального масштабирования;
skew(ax,ay)=матрица(1,tan(ay),tan(ay),1,0,0);
где ax и ay — значения по горизонтали и вертикали в градусах.
Пример:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px10px;float:left;}.on e{transform:matrix(0.866,0.5,-0.5,0.866,0,0);}.two{margin-left:35px;transform:matrix(0.586,0.8,-0.8,0.686,0,0);}. три {марта gin-left:40px;margin-top:25px;transform:matrix(0.586,0.8,-0.8,0.866,0,0);}.four{transform:matrix(0.586,0.8,-0.8,0.586,40,3) 0);</style></head><body><divclass=one></div><divclass=two></div><divclass=three></div><divclass=four></div </body></html>Результаты запуска:
Метод матрица() и метод 2D-преобразования объединены в один.
Матричный метод имеет шесть параметров, включая функции вращения, масштабирования, перемещения (перемещения) и наклона.
Используйте матрицу для выражения матрицы суммы преобразования (a,b,c,d,x,y)
●acx
●бди
●0 0 1
Давайте попрактикуемся на конкретном случае:
Код выглядит следующим образом:
<!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>body{margin:100px;}.transformElement{width:200px;height:200px;background-color:red;transition:all1slinear;float:left;po sition:relative;left:0;color:#FFF;/*transform-origin:lefttop;*/}.transformElement2{width:200px;height:200px;background-color:blue;transition:all1slinear ;float:left;}.transformElement:hover{/*transform:translate(200px,0)rotate(360deg)scale(2);*//*left:100px;*//*transform:scale(2,0.5) */transform:skew(-45d например, 45 градусов);}.lock{width:400px;height:400px;border-radius:50%;background-color:#Faa;position:relative;}.stick{width:4px;height:200px;background-color :блю e;position:absolute;left:198px;top:0;transition:all12slinear;transform-origin:centerbottom;}.stickshort{ширина:8px;высота:100px;background-color:rgb(142, 21 248); позиция: абсолютная; слева: 196 пикселей; сверху: 100 пикселей; переход: all12slinear; град);}.lock:hover.stickshort{transform:rotate(360deg);</style></head><body><!--<div></div><div></div>-- ><div><div></div><div></div></div></body></html>Результаты запуска:
