transform

 
transform是CSS3中的一个属性,用于对元素进行各种变形操作,
包括旋转、缩放、移动和倾斜等。
具体功能如下:

 
‌旋转‌:使用rotate()函数,可以顺时针或逆时针旋转元素。例如:transform: rotate(30deg);表示顺时针旋转30度。

‌缩放‌:使用scale()函数,可以放大或缩小元素。例如:transform: scale(2, 4);表示在X轴上放大2倍,在Y轴上放大4倍。

‌移动‌:使用translate()函数,可以平移元素。例如:transform: translate(50px, 100px);表示在X轴上移动50像素,在Y轴上移动100像素。

‌倾斜‌:使用skew()函数,可以倾斜元素。例如:transform: skew(30deg, 20deg);表示在X轴上倾斜30度,在Y轴上倾斜20度。

    

 

    

 
translate()是transform的一个具体功能,用于平移元素。
它接受两个参数,分别表示沿X轴和Y轴的移动距离。例如:

translate(50px, 100px);表示元素在X轴上移动50像素,在Y轴上移动100像素。

translate(-50%, -50%)表示元素在X轴和Y轴上分别移动其自身宽度和高度的一半。

 
.element {
    transform: translate(50px, 100px);
}
    

 


 
.element {
    transform: rotate(30deg);
    }
    

 


 
.element {
    transform: scale(2, 4);
    }
    
  

 


 


参考文章