变换可以改变元素的位置、大小、旋转、倾斜等属性，以创建各种动态效果。
一、常用的2D变换：
-
平移（translate）：使用 translate() 函数来改变元素的位置。可以指定水平和垂直方向的偏移量，如
transform: translate(100px, 50px); -
缩放（scale）：使用 scale() 函数来改变元素的大小。可以指定水平和垂直方向的缩放比例，如
transform: scale(1.5, 0.8); -
旋转（rotate）：使用 rotate() 函数来旋转元素。可以指定旋转角度，正值表示顺时针旋转，负值表示逆时针旋转，如
transform: rotate(45deg); -
倾斜（skew）：使用 skew() 函数来倾斜元素。可以指定水平和垂直方向的倾斜角度，如
transform: skew(10deg, -5deg);
二、3D变换：
CSS提供了更多的变换函数，可以在3D空间中进行操作：
-
平移（translate）：与2D变换类似，使用
translate3d()函数指定沿着X、Y、Z轴的偏移量。 -
缩放（scale）：与2D变换类似，使用
scale3d()函数指定沿着X、Y、Z轴的缩放比例。 -
旋转（rotate）：与2D变换类似，使用
rotate3d()函数指定围绕X、Y、Z轴旋转的角度。 -
透视（perspective）：使用
perspective()函数设置元素的透视效果。可以通过调整透视距离来改变元素近大远小的效果。
通过组合和动画，可以在元素上同时应用多个变换，从而创建出更复杂的效果。例如，可以使用过渡（transition）和关键帧动画（keyframes animation）来创建平滑的过渡和动画效果。
三、案例：
使用过渡（transition）创建平滑的过渡效果：
/* 过渡效果 */
.transition {transition-property: background-color;transition-duration: 1s;transition-timing-function: ease;
}/* 鼠标悬停时触发过渡 */
.transition:hover {background-color: black;
}使用关键帧动画（keyframes animation）创建平滑的动画效果：
/* 关键帧动画 */
@keyframes rotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}/* 应用动画 */
.animation {animation-name: rotate;animation-duration: 2s;animation-timing-function: linear;animation-iteration-count: infinite;
}/* 具有动画效果的元素 */
<div class="animation">这是一个旋转动画</div>
.transition 类将在鼠标悬停时触发背景颜色的过渡效果。.animation 类则可以使带有该类的元素执行旋转动画，持续时间为 2 秒，无限循环。
