变形属性:transform 可以实现元素的位移、拉伸或者旋转等效果 2D变换,是在一个平面对元素进行的操作。 可以对元素进行水平或者垂直位移、旋转或者拉伸 变形属性:transform的所有属性值 1、transform:none;默认值 2、transform:translate();移动 平移 单位是px 3、transform:rotate();旋转 单位是deg deg度数 4、transform:scale();缩放 没有单位 默认值是1 5、transform:skew();倾斜 单位是deg 6、transform:matrix();矩阵 7、transform:perspective();景深 视距 单位是px 确定坐标系 .默认状态下,x轴是水平的,向右为正。 .默认状态下,y轴是垂直的,向下为正,这与传统的数学坐标系不同。 transform:translate()移动 属性值: translateX():水平移动 translateY():垂直移动 缩写: 1.transform:translateX(像素值) translateY(像素值); 2.transform:translate(X轴像素值,Y轴像素值); 注意:在和旋转,缩放等属性值一起用时,变形属性值放在前面会改变它的轴方向,所以要把移动的属性值放在前面才不受影响。 transform:rotate()旋转 属性值:rotateX():水平旋转 rotateY():垂直移动 缩写:transform:rotateX(X轴像素值) rotateY(Y轴像素值); 注意:旋转rotate只有一种缩写,要和translate区分开 transform:scale()缩放 属性值:scale():值趋于0~1,大于1是放大,小于1是缩小 可以改变基点的位置,来实现缩放的方向 基点transform-origin属性 可以改变变换的方向 属性值:可以写一个或两个(不写默认是中心点) 例如:transform-origin:top;表示基点变成上边 transform-origin:bottom left;表示基点变成左下方 如何理解基点呢? 举个例子: 写一个div 宽度为2px高度60px,让它沿X轴旋转90度,css属性就是transform:rotateX(90deg) 不写基点位置的默认是从中间旋转的,旋转后它看起来就是高度为0px了 加上基点transform-origin:bottom;这样它是把X轴移到div的底部开始旋转,旋转后看起来的高度就是30px