CSS3中的2D转换允许你在平面上对元素进行各种变换。以下是一些常见的2D转换属性：

1. 平移（Translate）：
   transform: translate(x, y);
   这会将元素沿着 x 和 y 轴移动。

2. 缩放（Scale）：
   transform: scale(x, y);
   这会根据提供的 x 和 y 缩放因子，缩放元素。

3. 旋转（Rotate）：
   transform: rotate(angle);
   这会将元素旋转指定的角度。

4. 倾斜（Skew）：
   transform: skew(x-angle, y-angle);
   这会使元素在 x 和 y 轴上倾斜指定的角度。

5. 变换原点（Transform Origin）：
   transform-origin: x-axis y-axis;
   这会指定元素变换的原点，默认是元素的中心。

示例：
/* 平移 */
.element {
  transform: translate(50px, 30px);
}

/* 缩放 */
.element {
  transform: scale(1.5, 1.5);
}

/* 旋转 */
.element {
  transform: rotate(45deg);
}

/* 倾斜 */
.element {
  transform: skew(30deg, 20deg);
}

/* 变换原点 */
.element {
  transform-origin: top left;
}

这只是一些基本的用法，你可以组合这些转换效果，以创建更复杂的动画和布局。记得在使用这些属性时，考虑不同浏览器的兼容性。


转载请注明出处：http://www.zyzy.cn/article/detail/4062/CSS