CSS详知识点——CSS变形

陈大爷（有低保）2024-08-22 17:18

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);
}