一、概念
【2D】俗称2d变换,指的是基于2d平面的角度,让标签元素发生变化。例如,让盒子移动、让盒子缩放、让盒子旋转。
二、平移
1.概念
平移是让盒子在水平方向或垂直方向进行移动。
2.语法
transform:方向属性(像素值);
方向属性:
translateX(水平方向移动,正值向右,负值向左)
translateY(垂直方向移动,正值向下,负值向上)
复合写法:
transform: translate(水平方向像素值, 垂直方向像素值);
三、缩放 1.概念
缩放指让盒子可以缩放或放大一定的倍数。
2.语法
transform:方向属性(放大倍数)
方向属性:
scaleX(横向放大)
scaleY(纵向放大)
复合写法:
transform: scale(倍数);
(注意:大于1的放大,小于1缩小)
四、旋转 1.概念
旋转指让盒子绕着x轴或y轴进行旋转。
2.语法
transform: 方向属性(旋转的角度,单位为deg);
transform-origin: x轴坐标 y轴坐标;
(调整旋转的中心,可以使用像素值,可以使用关键字)
backface-visibility: hidden;
(设置旋转180度以后背面是否可见)
方向属性:
rotateX(绕着x轴旋转多少角度)
rotateY(绕着Y轴旋转多少角度)
rotate(绕着盒子中心点旋转多少角度)