1. 平移（Translation）： translate() 函数用于在平面上移动元素。
transform: translate(50px, 30px);
这个例子将元素在水平方向上移动了50像素，在垂直方向上移动了30像素。
2. 旋转（Rotation）： rotate() 函数用于在平面上旋转元素。
transform: rotate(45deg);
这个例子将元素顺时针旋转了45度。
3. 缩放（Scale）： scale() 函数用于在平面上缩放元素。
transform: scale(1.5, 0.8);
这个例子将元素水平方向缩放为1.5倍，垂直方向缩放为0.8倍。
4. 倾斜（Skew）： skew() 函数用于在平面上倾斜元素。
transform: skew(30deg, 20deg);
这个例子将元素水平方向倾斜了30度，垂直方向倾斜了20度。
5. 变换原点（Transform Origin）： transform-origin 属性用于设置元素变换的原点。
transform-origin: 50% 50%;
这个例子将元素的变换原点设置在中心。
组合 2D 转换：
你也可以组合多个转换效果，通过空格分隔：
transform: translate(50px, 30px) rotate(45deg) scale(1.5, 0.8);
这个例子结合了平移、旋转、和缩放效果。
过渡效果（Transition）：
为了使转换效果更加平滑，你可以使用过渡效果：
transition: transform 0.3s ease-in-out;
这个例子表示在执行 transform 转换时，将产生一个0.3秒的平滑过渡效果，采用渐变的加速和减速。
2D 转换是 CSS3 提供的一个强大的功能，可以使页面元素在不同的状态下更加灵活、有趣地变换，增强用户体验。
转载请注明出处：http://www.zyzy.cn/article/detail/12564/CSS