CSS变形 transform 的所有属性详解

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN 知名博主，GIS 领域优质创作者，深耕 openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts 等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

文章目录

• • 一、主要变形属性
  • • • 1. `transform`
      • 2. `transform-origin`
  • 二、代码示例
  • 三、注意事项

CSS 变形（Transform）属性允许您对元素进行复杂的 2D 或 3D 变换，包括旋转、缩放、移动（平移）、倾斜和矩阵变换。这些变换不会影响文档流，而是改变元素的外观。以下是 CSS 变形属性的详细说明，以及对应的代码示例：

一、主要变形属性

1. transform

定义: 应用于元素的 2D 或 3D 变换函数。

语法:

selector {
  transform: function-list;
}

可用函数:

• rotate(angle): 顺时针旋转元素。
• rotateX(angle), rotateY(angle), rotateZ(angle): 3D 旋转，分别沿 X、Y、Z 轴。
• scale(x[, y]): 缩放元素，可以独立设置水平（x）和垂直（y）比例。
• scaleX(x), scaleY(y): 单独设置水平或垂直缩放比例。
• skew(ax[, ay]): 倾斜元素，沿着 X 轴和（可选）Y 轴。
• skewX(ax), skewY(ay): 单独沿 X 或 Y 轴倾斜。
• translate(x[, y]): 平移元素，按给定的水平（x）和（可选）垂直（y）距离。
• translateX(x), translateY(y): 单独沿 X 或 Y 轴平移。
• translateZ(z): 3D 平移，沿 Z 轴移动。
• matrix(a, b, c, d, tx, ty): 使用一个矩阵进行综合变换。

2. transform-origin

定义: 变换的原点（参考点），决定了变形操作相对于元素的位置。

语法:

selector {
  transform-origin: x-axis y-axis z-axis;
}

可用值:

• x-axis: 水平位置，如left, center, right, 或长度值。
• y-axis: 垂直位置，如top, center, bottom, 或长度值。
• z-axis（可选，仅 3D 变换）：深度位置，如长度值。

二、代码示例

div class="transformed-element">Transformed Elementdiv>

.transformed-element {
  
  transform: translate(50px, ¼em) rotate(45deg) scale(1.5);

  
  transform: perspective(800px) rotateX(30deg) rotateY(20deg) translateZ(50px);

  
  transform-origin: left top;
}

在这个示例中：

• .transformed-element首先沿 X 轴平移 50px，沿 Y 轴平移¼em，然后顺时针旋转 45 度，最后整体缩放 1.5 倍。
• 在 3D 变换示例中，为元素设置了透视效果（800px），接着沿 X 轴旋转 30 度，沿 Y 轴旋转 20 度，并沿 Z 轴平移 50px。
• 变换原点设置为元素左上角，这意味着所有变换操作都将基于元素左上角进行。

三、注意事项

• 浏览器兼容性 ：transform 属性及其相关函数在现代浏览器中得到良好支持。但对于较老的浏览器（如 IE 9 及更低版本），可能需要使用浏览器前缀（如 -webkit-、-moz- 等）或渐进增强策略以确保兼容性。

• 性能影响：复杂的变形或过度使用可能会导致性能下降，特别是在移动设备上。应合理使用并测试性能。

• 层叠与混合模式 ：变形效果可以与其他 CSS 属性（如opacity、mix-blend-mode 等）结合使用，创造出更为丰富的视觉效果。

综上所述，CSS 变形属性为网页设计提供了强大的图形变换能力，通过灵活运用这些属性及其函数，您可以轻松实现各种动态效果和创意布局。