CSS-transform

transform 函数是CSS中用于进行元素变换的强大工具。它可以在平面或三维空间内进行变换，包括旋转、缩放、平移和倾斜。以下是一些常见的 transform 函数用法：

1. 平移（Translate）：

   • translate() 函数用于沿X、Y和Z轴移动元素。它接受长度或百分比值作为参数，分别表示在X、Y和Z轴上的位移。例如：

   transform: translate(20px, 30px);
   

   这将使元素沿X轴移动20像素，沿Y轴移动30像素。

2. 旋转（Rotate）：

   • rotate() 函数用于围绕元素的原点旋转。它接受角度值作为参数，表示旋转的角度。例如：

   transform: rotate(45deg);
   

   这将使元素逆时针旋转45度。

3. 缩放（Scale）：

   • scale() 函数用于沿X、Y和Z轴缩放元素。它接受数值作为参数，表示在X、Y和Z轴上的缩放比例。例如：

   transform: scale(1.5, 2);
   

   这将使元素在X轴上放大1.5倍，在Y轴上放大2倍。

4. 倾斜（Skew）：

   • skew() 函数用于在X和Y轴上倾斜元素。它接受角度值作为参数，表示在X和Y轴上的倾斜角度。例如：

   transform: skew(30deg, 20deg);
   

   这将使元素在X轴上逆时针倾斜30度，在Y轴上逆时针倾斜20度。

5. 原点变换（Transform Origin）：

   • transform-origin 属性用于指定元素的变换原点，默认情况下为元素的中心点。你可以通过设置该属性来改变变换的基准点。例如：

   transform-origin: top right;
   

   这将使变换以元素的右上角为原点。

这只是 transform 函数的一些基本用法。它的功能非常强大，可以通过组合这些函数来创建复杂的元素变换效果。同时，transform 也可以与过渡（transition）和关键帧动画（@keyframes）等结合使用，实现更复杂的动画效果。