变形：改变元素的形状、大小或(变形变化)

变形：改变元素的外形、尺寸或位置HTML
html

变形是指改变元素的外形、尺寸或位置。

变形类型

1. 缩放：改变元素的尺寸。
2. 旋转：围绕一个点旋转元素。
3. 平移：移动元素而不改变其尺寸或方向。
4. 倾斜：沿着一个轴倾斜元素。
5. 剪切：沿一个轴剪切元素。
6. 透视：创建一个 3D 效果，使元素看起来具有深度。
7. 矩阵变换：使用一组数字值同时应用多个变换。

使用 CSS 变形

可以使用CSS 中的

transform

属性来变形元素。

以下是一些变形属性示例：

• 
scale(x, y)

  ：缩放元素。例如，
  
scale(2, 1)

  将元素水平放大一倍。
• 
rotate(angle)

  ：围绕一个点旋转元素。例如，
  
rotate(45deg)

  将元素旋转 45 度。
• 
translate(x, y)

  ：移动元素。例如，
  
translate(100px, 50px)

  将元素向右移动 100 像素，向下移动 50 像素。
• 
skew(x-angle, y-angle)

  ：沿着一个轴倾斜元素。例如，
  
skew(15deg, 0deg)

  将元素沿 X 轴倾斜 15 度。
• 
matrix(a, b, c, d, e, f)

  ：使用一组数字值同时应用多个变换。例如，
  
matrix(1,0, 0, 2, 0, 0)

  将元素在 Y 轴上放大一倍。

变形应用

变形可用于各种目的，例如：

• 创建动画效果。
• 调整元素以适应不同的屏幕尺寸。
• 创建 3D 效果。
• 扭曲或变形文本。
• 创建交互式元素（例如，可拖放元素）。

浏览器支持

CSS 变形在所有现代浏览器中都受到良好支持。