还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。
| No. | 内容链接 |
|---|---|
| 1 | Openlayers 【入门教程】 - 【源代码+示例300+】 |
| 2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
| 3 | Cesium 【入门教程】 - 【源代码+图文示例200+】 |
| 4 | MapboxGL【入门教程】 - 【源代码+图文示例150+】 |
| 5 | 前端就业宝典 【面试题+详细答案 1000+】 |
文章目录
- 一、主要变形属性
- 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 Element</div>
.transformed-element {
/* 2D变换示例 */
transform: translate(50px, ¼em) rotate(45deg) scale(1.5);
/* 3D变换示例 */
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变形属性为网页设计提供了强大的图形变换能力，通过灵活运用这些属性及其函数，您可以轻松实现各种动态效果和创意布局。
