（图片来源网络，侵删）
1、translate()：移动元素，你可以指定X轴和Y轴的移动距离。
transform: translate(50px, 100px);
2、scale()：缩放元素，你可以指定X轴和Y轴的缩放比例。
transform: scale(2, 0.5);
3、rotate()：旋转元素，你可以指定旋转的角度（以度为单位）。
transform: rotate(45deg);
4、skew()：倾斜元素，你可以指定X轴和Y轴的倾斜角度。
transform: skew(30deg, 20deg);
你还可以组合使用多个变换函数，只需在transform属性中用空格分隔它们即可。
transform: translate(50px, 100px) scale(2, 0.5) rotate(45deg);
CSS还提供了transform-origin属性，用于设置变换的原点，默认情况下，变换的原点是元素的中心点，但你可以通过transform-origin属性来改变它，将原点设置为左上角：
transform-origin: left top;
需要注意的是，CSS变换不会影响页面的布局，它们只是在渲染时改变元素的视觉表现，如果你想要通过变换来改变元素的实际位置或大小，从而影响页面布局，你可能需要使用其他CSS属性或JavaScript来实现。
CSS3还引入了3D变换函数，如rotateX()、rotateY()、rotateZ()和translateZ()等，它们允许你在三维空间中对元素进行变换，这些函数的使用方法与上述的二维变换函数类似。
文章版权声明：除非注明，否则均为论主机评测网原创文章，转载或复制请以超链接形式并注明出处。