本文共 1252 字，大约阅读时间需要 4 分钟。

2D变形：    1）平移    transform: translate(x,y);  元素从当前位置移动到给定的x轴和y轴的坐标位置    transform: translateX(x); 沿着x轴的方向移动    transform: translateY(y); 沿着y轴的方向移动    注意：水平向右值为正，垂直向下值为正值    transform: translate(50px);沿着x轴方向移动    2）旋转    transform: rotate(ndeg);     角度为正值，元素沿着顺时针方向旋转n度；角度为负值，沿着逆时针方向旋转    3）缩放    transform: scale(x,y); 元素沿着x轴和y轴做缩放    transform: scaleX(x); 沿着x轴方向缩放    transform: scaleY(y); 沿着y轴方向缩放    x和y的取值：0-1缩小，1表示正常大小，1以上表示放大，负值时，先翻转后缩放    transform: scale(0.5); x轴和y轴等比例缩放    4）倾斜    transform: skew(x,y); 元素沿着水平方向和垂直方向倾斜，单位deg    transform: skewX(x); 沿着x轴方向倾斜    transform: skewY(y); 沿着y轴方向倾斜    transform: skew(30deg);沿着x轴方向倾斜    注意：transform: rotate(360deg) scale(3);元素既要旋转又要缩放transform-origin属性：元素基点位置的调整，必须与transform属性配合使用3D变形必备属性：    1）transform-style属性：        transform-style: preserve-3d; 创建3D空间    2）perspective属性：透视属性，近大远小，单位像素    注意：以上两个属性均需要写在父元素中    3D空间的轴线：x轴（右为正）、y轴（下为正）、z轴（向外为正）3D变形效果：    1）平移    transform: translateZ(z); 沿着z轴平移    transform: translate3d(x,y,z); 沿着x轴、y轴、z轴移动    2）旋转    transform: rotateX(xdeg); 沿着x轴方向旋转    transform: rotateY(ydeg); 沿着y轴方向旋转    transform: rotateZ(zdeg); 沿着z轴方向旋转transform: rotate3d(x,y,z,angle); 沿着x轴、y轴、z轴旋转    3）缩放：    transform: scaleZ(); 沿着z轴缩放    transform: scale3d(x,y,z); 沿着x轴、y轴、z轴缩放

转载地址：https://jackiehao.blog.csdn.net/article/details/104617931 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！