CSS详知识点——CSS变形

transform:属性

translate()：平移函数，基于X、Y坐标重新定位元素的位置

translateX（tx）表示只设置X轴的位移

#yi{transform:translate(50px,30px);}#yi{transform: translateX(100px);           //只移动X轴上的方向}#yi{transform: translateY(100px);           //只移动Y轴上的方向}

scale():缩放函数，可以使任意元素对象尺寸发生变化

 #er{transform: scale(0.5,0.5);          //横着缩小两倍，竖着缩小两倍}

skew():倾斜，元素会变形，不会旋转

单位是deg度数

正值表示逆时针倾斜，负值表示顺时针倾斜

skewX（ax）：表示只设置X轴的倾斜

skewY（ay）：表示只设置Y轴的倾斜

#san{transform: skew(30deg);      
}
#san{transform: skewX(40deg);                  //沿X轴倾斜40度}

rotate():顺时针旋转

单位deg度数

#san{width: 300px;                       //这块当时旋转不动是因为盒子太长了，没设置宽度transform: rotate(30deg);
}